If true, the pin input receives focus on mount
Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Props#
autoFocus
autoFocusDescription
Type
booleancolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"defaultValue
defaultValueDescription
The default value of the pin input
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors`
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors`
Type
stringid
idDescription
The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
Type
stringisDisabled
isDisabledDescription
If true, the pin input component is put in the disabled state
Type
booleanisInvalid
isInvalidDescription
If true, the pin input component is put in the invalid state
Type
booleanmanageFocus
manageFocusDescription
If true, focus will move automatically to the next input once filled
Type
booleanDefault
truemask
maskDescription
If true, the input's value will be masked just like `type=password`
Type
booleanonChange
onChangeDescription
Function called on input change
Type
(value: string) => voidonComplete
onCompleteDescription
Function called when all inputs have valid values
Type
(value: string) => voidotp
otpDescription
If true, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`.
Type
booleanplaceholder
placeholderDescription
The placeholder for the pin input
Type
stringsize
sizeDescription
The size of the PinInput
Type
"lg" | "md" | "sm" | "xs"Default
mdtype
typeDescription
The type of values the pin-input should allow
Type
"number" | "alphanumeric"value
valueDescription
The value of the pin input. This is the value that will be returned when the pin input is filled
Type
stringvariant
variantDescription
The variant of the PinInput
Type
"outline" | "flushed" | "filled" | "unstyled"Default
outlinePinInputField#
PinInputField composes Input so you can pass all Input props.
colorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"isDisabled
isDisabledDescription
If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled
Type
booleanDefault
falseisInvalid
isInvalidDescription
If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true
Type
booleanDefault
falseisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanDefault
falseisRequired
isRequiredDescription
If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
Type
booleanDefault
falsesize
sizeDescription
The size of the Input
Type
"lg" | "md" | "sm" | "xs"Default
mdvariant
variantDescription
The variant of the Input
Type
"outline" | "filled" | "flushed" | "unstyled"Default
outlineProps#
autoFocus
autoFocusDescription
If true, the pin input receives focus on mount
Type
booleancolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"defaultValue
defaultValueDescription
The default value of the pin input
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors`
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors`
Type
stringid
idDescription
The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
Type
stringisDisabled
isDisabledDescription
If true, the pin input component is put in the disabled state
Type
booleanisInvalid
isInvalidDescription
If true, the pin input component is put in the invalid state
Type
booleanmanageFocus
manageFocusDescription
If true, focus will move automatically to the next input once filled
Type
booleanDefault
truemask
maskDescription
If true, the input's value will be masked just like `type=password`
Type
booleanonChange
onChangeDescription
Function called on input change
Type
(value: string) => voidonComplete
onCompleteDescription
Function called when all inputs have valid values
Type
(value: string) => voidotp
otpDescription
If true, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`.
Type
booleanplaceholder
placeholderDescription
The placeholder for the pin input
Type
stringsize
sizeDescription
The size of the PinInput
Type
"lg" | "md" | "sm" | "xs"Default
mdtype
typeDescription
The type of values the pin-input should allow
Type
"number" | "alphanumeric"value
valueDescription
The value of the pin input. This is the value that will be returned when the pin input is filled
Type
stringvariant
variantDescription
The variant of the PinInput
Type
"outline" | "flushed" | "filled" | "unstyled"Default
outlinePinInputField#
PinInputField composes Input so you can pass all Input props.
colorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"isDisabled
isDisabledDescription
If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled
Type
booleanDefault
falseisInvalid
isInvalidDescription
If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true
Type
booleanDefault
falseisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanDefault
falseisRequired
isRequiredDescription
If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
Type
booleanDefault
falsesize
sizeDescription
The size of the Input
Type
"lg" | "md" | "sm" | "xs"Default
mdvariant
variantDescription
The variant of the Input
Type
"outline" | "filled" | "flushed" | "unstyled"Default
outline