The PinInput component is similar to the Input component,
but it is optimized for entering sequences of digits.
The most common application is for entering OTP or security codes.
PinInput.Each input collects one number at a time. When a number is entered, focus is moved automatically to the next input, until all fields are filled.
There are three sizes of an Input:
sm (24px)md (32px)lg (40px)You can set the defaultValue of the PinInput if you wish:
Or even a partial defaultValue:
If you donʼt like the default placeholder (○), you can change that too.
By default, PinInput moves focus automatically to the next input once a field
is filled. It also transfers focus to a previous input when Delete is
pressed with focus on an empty input.
To disable this behavior, set manageFocus to false
Try copying & pasting 1234 into any of the inputs in the example above.
By default, you can only change one input at a time, but if one of the input
field receives a longer string by pasting into it, PinInput attempts to
validate the string and fill the other inputs.
| Name | Type | Description | Default |
|---|---|---|---|
| autoFocus | boolean | If `true`, the pin input receives focus on mount | - |
| children | ReactNode | The children of the pin input component | - |
| colorScheme | string | - | |
| defaultValue | string | The default value of the pin input | - |
| errorBorderColor | string | The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500" | - |
| focusBorderColor | string | The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500" | - |
| id | string | The base id string that will be applied to the input fields. The index of the input will be appended to this base id. @example if id="foo", the first input will have `foo-0` | - |
| isDisabled | boolean | If `true`, the pin input component is put in the disabled state | - |
| isInvalid | boolean | If `true`, the pin input component is put in the invalid state | - |
| manageFocus | boolean | If `true`, focus will move automatically to the next input once filled | true |
| onChange | ((value: string) => void) | Function called on input change | - |
| onComplete | ((value: string) => void) | Function called when all inputs have valid values | - |
| placeholder | string | The placeholder for the pin input | - |
| size | string | - | |
| value | string | The value of the the pin input. This is the value that will be returned when the pin input is filled | - |
| variant | string | - |
PinInputField composes Input so you can pass all Input props.
| Name | Type | Description | Default |
|---|---|---|---|
| colorScheme | string | - | |
| errorBorderColor | string | The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500" | - |
| focusBorderColor | string | The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500" | - |
| isDisabled | boolean | 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 | - |
| isFullWidth | boolean | If `true`, the input element will span the full width of its parent | - |
| isInvalid | boolean | 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` | - |
| isLoading | boolean | If `true`, the form control will be in its `loading` state | - |
| isReadOnly | boolean | If `true`, the form control will be readonly | - |
| isRequired | boolean | 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` | - |
| size | string | - | |
| variant | string | - |