The visual color appearance of the component
Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Import#
import { PinInput, PinInputField } from '@chakra-ui/react'
- PinInput: The component that provides context to all the pin-input fields.
- PinInputField: The text field that user types in - must be a direct child
of
PinInput
.
Usage#
The most common use case of the pin input is for entering OTP or security codes.
Each input collects one character at a time. When a value is entered, focus is moved automatically to the next input, until all fields are filled.
<HStack><PinInput><PinInputField /><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Allowing Alphanumeric values#
By default, the pin input accepts only number values. To add support for
alphanumeric values, pass the type
prop and set its value to either
alphanumeric
or number
.
<HStack><PinInput type='alphanumeric'><PinInputField /><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Using fields as a one time password (OTP)#
Use the otp
prop on PinInput
to set autocomplete="one-time-code"
for all
children PinInputField
components.
<HStack><PinInput otp><PinInputField /><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Masking the pin input's value#
When collecting private or sensitive information using the pin input, you might
need to mask the value entered, similar to <input type="password"/>
.
Pass the mask
prop to PinInput
to achieve this.
<HStack><PinInput type='alphanumeric' mask><PinInputField /><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Changing the size of the PinInput#
The PinInput
component comes in four sizes. The default is md
.
xs
(24px
)sm
(32px
)md
(40px
)lg
(48px
)
<Stack><HStack><PinInput size='xs'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack><HStack><PinInput size='sm'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack><HStack><PinInput size='md'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack><HStack><PinInput size='lg'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack></Stack>
Adding a defaultValue#
You can set the defaultValue
of the PinInput if you wish:
<HStack><PinInput defaultValue='234'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Or even a partial defaultValue:
<HStack><PinInput defaultValue='23'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Changing the placeholder#
To customize the default input placeholder (â—‹
), pass the placeholder
prop
and set it to your desired placeholder.
<HStack><PinInput placeholder='🥳'><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Disable focus management#
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
<HStack><PinInput manageFocus={false}><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
AutoFill and Copy + Paste#
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.
<HStack><PinInput><PinInputField /><PinInputField /><PinInputField /></PinInput></HStack>
Props#
PinInputField#
PinInputField composes Input
so you can pass all Input
props.
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
isDisabled
isDisabled
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
boolean
false
isInvalid
isInvalid
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
boolean
false
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
false
isRequired
isRequired
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
boolean
false
size
size
The size of the Input
"lg" | "md" | "sm" | "xs"
md
variant
variant
The variant of the Input
"outline" | "filled" | "flushed" | "unstyled"
outline