The pin input is optimized for entering a sequence of digits or letters. The input fields allow one character at a time. When the digit or letter is entered, focus transfers to the next input in the sequence, until every input is filled.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
boolean
Whether to auto-focus the first input.
boolean
Whether to blur the input when the value is complete
string[]
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the inputs are disabled
string
The associate form of the underlying input element.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string hiddenInput: string label: string control: string input(id: string): string }>
The ids of the elements in the pin input. Useful for composition.
boolean
Whether the pin input is in the invalid state
boolean
If `true`, the input's value will be masked just like `type=password`
string
The name of the input element. Useful for form submission.
(details: ValueChangeDetails) => void
Function called on input change
(details: ValueChangeDetails) => void
Function called when all inputs have valid values
(details: ValueInvalidDetails) => void
Function called when an invalid value is entered
boolean
If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
string
The regular expression that the user-entered input value is checked against.
string
The placeholder text for the input
boolean
Whether to select input value when input is focused
IntlTranslations
Specifies the localized strings that identifies the accessibility elements and their states
'numeric' | 'alphabetic' | 'alphanumeric'
The type of value the pin-input should allow
string[]
The value of the the pin input.
() => void
Function to clear the value of the inputs.
Dict<any>
() => void
Function to focus the pin-input. This will focus the first input.
({ index }: { index: number }) => Dict<any>
Dict<any>
boolean
Whether all inputs are filled.
Dict<any>
Dict<any>
(value: string[]) => void
Function to set the value of the inputs.
(index: number, value: string) => void
Function to set the value of the input at a specific index.
string[]
The value of the input as an array of strings.
string
The value of the input as a string.
number