Go Main page
Go Main page

Web components

cover

components

Input Signature

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style input search is INPUT_SIGNATURE_STYLES.

You can not change the name of the object of tokens.

InputSignature component has one way to modify the styles:

  • Variant: modify the styles of the InputSignature.

The structure of the INPUT_SIGNATURE_STYLES object is:

Variants and States

Variants can modify the styles for each inner state of the inputSignature. The inner states are:

1234567
enum InputSignatureState {
  DEFAULT
  ACTIVE
  FILLED
  ERROR
  DISABLED
}

For each inner state the next tokens can be used:

12345678910
const INPUT_SIGNATURE_STYLES = {
  [VARIANT]: {
    signatureStyle: InputSignatureLineStyles,
    [STATE]: {
      container: CommonStyleType,
      placeholderContainer: CommonStyleType,
      placeholderText?: TypographyTypes,
    }
  }
}

Types

1234
type InputSignatureLineStyles = {
  color: 'color';
  lineWidth: 'width';
}