Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Digit Sequence

v.1.0.0 | Saturn
Healthy
StorybookGithub

A type of input used to enter sequences of digits such as passwords or signature keys.

The inputDigitSequence component inherits its properties of the input component. For more information visit the Input documentation.

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 predefine style for its quick use, access them through the variant prop:

import { InputDigitSequence } from '@kubit-ui-web/react-components'
12345678910
<InputDigitSequence
  actionButton={{
    variant: 'ACTION_PRIMARY',
    icon: { icon: 'ICON_PLACEHOLDER' },
    content: 'Show code',
    ['aria-label']: 'aria-label test',
  }}
  helpText={{ content: 'Help text' }}
  inputsArray={[
    { blockedBySystem: false, ['aria-label']: 'input1' },

ShowDigitAfterWrite

With the showDigitAfterWrite set to TRUE boolean prop you can set the input to briefly showing the digit, instead of the dot, during the writing.

import { InputDigitSequence } from '@kubit-ui-web/react-components'
12345678910
<InputDigitSequence
  actionButton={{
    variant: 'ACTION_PRIMARY',
    icon: { icon: 'ICON_PLACEHOLDER' },
    content: 'Show code',
    ['aria-label']: 'aria-label test',
  }}
  helpText={{ content: 'Help text' }}
  inputsArray={[
    { blockedBySystem: false, ['aria-label']: 'input1' },
Input DateAccessibility
Input Digit SequenceDesign Specs