invalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falsePinInput
PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.
Props
PinInputFieldProps
isDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
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
stringdisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseerrorBorderColor
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 ... | [...]invalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
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
'○'readOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falsesize
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