Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Signature

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Allows users to enter a signature directly on the screen with their finger in the case of touch devices or with the cursor in the case of desktop.

import { InputSignatureUnControlled } from '@kubit-ui-web/react-components'
123456
<div style={{ width: '300px' }}>
  <InputSignatureUnControlled
    variant="DEFAULT"
    placeholder={{ content: "Sign here" }}
  />
</div>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for quick use. Access them through the variant prop:

import { InputSignatureUnControlled } from '@kubit-ui-web/react-components'
123456
<div style={{ width: '300px' }}>
  <InputSignatureUnControlled
    variant="DEFAULT"
    placeholder={{ content: "Sign here" }}
  />
</div>

Error

If error is TRUE the component will communicate that something is not right. The type of error and the form of solving should be communicate through the errorText component.

import { InputSignatureUnControlled } from '@kubit-ui-web/react-components'
12345678
<div style={{ width: '300px' }}>
  <InputSignatureUnControlled
    variant="DEFAULT"
    placeholder={{ content: "Sign here" }}
    errorText={{ content: 'Error Message' }}
    error
  />
</div>

Disabled

If disabled is TRUE it means that is a non interactive component.

import { InputSignatureUnControlled } from '@kubit-ui-web/react-components'
1234567
<div style={{ width: '300px' }}>
  <InputSignatureUnControlled
    variant="DEFAULT"
    placeholder={{ content: "Sign here" }}
    disabled
  />
</div>
Input SearchAccessibility
Input SignatureDesign Specs