The children of the pin input component
Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Props#
childrenrequired
childrenrequiredDescription
Type
ReactNodeautoFocus
autoFocusDescription
If true, the pin input receives focus on mount
Type
booleancolorScheme
colorSchemeDescription
Color Schemes for PinInput are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
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` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
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. @example if id="foo", the first input will have `foo-0`
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) => void)onComplete
onCompleteDescription
Function called when all inputs have valid values
Type
((value: string) => void)otp
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
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"type
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
variantType
"outline" | "flushed" | "filled" | "unstyled"Default
"outline"PinInputField#
PinInputField composes Input so you can pass all Input props.
colorScheme
colorSchemeDescription
Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringhtmlSize
htmlSizeDescription
The native HTML size attribute to be passed to the input
Type
numberisDisabled
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
booleanisInvalid
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
booleanisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanisRequired
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
booleansize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"variant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"Props#
childrenrequired
childrenrequiredDescription
The children of the pin input component
Type
ReactNodeautoFocus
autoFocusDescription
If true, the pin input receives focus on mount
Type
booleancolorScheme
colorSchemeDescription
Color Schemes for PinInput are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
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` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
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. @example if id="foo", the first input will have `foo-0`
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) => void)onComplete
onCompleteDescription
Function called when all inputs have valid values
Type
((value: string) => void)otp
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
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"type
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
variantType
"outline" | "flushed" | "filled" | "unstyled"Default
"outline"PinInputField#
PinInputField composes Input so you can pass all Input props.
colorScheme
colorSchemeDescription
Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringhtmlSize
htmlSizeDescription
The native HTML size attribute to be passed to the input
Type
numberisDisabled
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
booleanisInvalid
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
booleanisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanisRequired
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
booleansize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"variant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"