isDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falsePinInput
PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.
Props
PinInputFieldProps
isInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falsePinInputProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"defaultValue
Description
The initial value of the pin input.
Type
stringerrorBorderColor
Description
The border color when the input is invalid.
Type
"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]focusBorderColor
Description
The border color when the input is focused.
Type
"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]isDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseisInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falseitems
Description
The number of inputs to display.
Type
numberDefault
4manageFocus
Description
If true, focus will move automatically to the next input once filled.
Type
booleanDefault
truemask
Description
If true, the input's value will be masked just like type=password.
Type
booleanonChange
Description
Function called on input change.
Type
(value: string) => voidonComplete
Description
Function called when all inputs have valid values.
Type
(value: string) => voidotp
Description
If true, the pin input component signals to its fields that they should.
Type
booleanplaceholder
Description
The placeholder for the pin input.
Type
stringDefault
'○'size
Description
The size of the PinInput.
Type
"xs" | "sm" | "md" | "lg"Default
"md"type
Description
The type of values the pin-input should allow.
Type
"number" | "alphanumeric"Default
'number'value
Description
The value of the pin input.
Type
stringvariant
Description
The variant of the PinInput.
Type
"filled" | "flushed" | "outline" | "unstyled"Default
"outline"Edit this page on GitHub