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.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
autoFocus | boolean | |
blurOnComplete | boolean | |
defaultValue | string[] | |
dir | 'ltr' | 'rtl' | "ltr" |
disabled | boolean | |
form | string | |
getRootNode | () => ShadowRoot | Node | Document | |
id | string | |
ids | Partial<{
root: string
hiddenInput: string
label: string
control: string
input(id: string): string
}> | |
invalid | boolean | |
mask | boolean | |
name | string | |
onValueChange | (details: ValueChangeDetails) => void | |
onValueComplete | (details: ValueChangeDetails) => void | |
onValueInvalid | (details: ValueInvalidDetails) => void | |
otp | boolean | |
pattern | string | |
placeholder | string | |
selectOnFocus | boolean | |
translations | IntlTranslations | |
type | 'numeric' | 'alphabetic' | 'alphanumeric' | |
value | string[] |
| Prop | Type | Default |
|---|---|---|
index | number | |
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |
| Prop | Type | Default |
|---|---|---|
asChild | boolean |