Leave Yamada UI a star
StarPinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"Description
The border color when the input is invalid.
Type
"border" | "link" | BorderColor | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | ColorModeArray<...>Description
The border color when the input is focused.
Type
"border" | "link" | BorderColor | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | ColorModeArray<...>Description
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
The number of inputs to display.
Type
numberDefault
4Description
If true, focus will move automatically to the next input once filled.
Type
booleanDefault
trueDescription
If true, the input's value will be masked just like type=password.
Type
booleanDescription
Function called on input change.
Type
(value: string) => voidDescription
Function called when all inputs have valid values.
Type
(value: string) => voidDescription
If true, the pin input component signals to its fields that they should.
Type
booleanDescription
The placeholder for the pin input.
Type
stringDefault
'○'Description
The size of the PinInput.
Type
"xs" | "sm" | "md" | "lg"Default
mdDescription
The type of values the pin-input should allow.
Type
"number" | "alphanumeric"Default
'number'Description
The value of the pin input.
Type
stringDescription
The variant of the PinInput.
Type
"outline" | "filled" | "flushed" | "unstyled"Default
outlineDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseEdit this page on GitHub