PinInput
Usage
Length
Set length
prop to control number of rendered fields:
Type
By default, PinInput
accepts letters and numbers. To allow numbers only, set type="number"
:
Regex type
You can use regular expression to validate user input. Characters that do not match given expression
will be disregarded. For example, to create a PinInput
that will accept only numbers from 0
to 3
,
set type={/^[0-3]+/}
:
Placeholder
Set placeholder
to change placeholder of all fields. Note that it only accepts strings:
Disabled state
Error state
Masked
One time code
Some operating systems expose last received SMS code to be used by applications like your keyboard.
If the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.
Prop oneTimeCode
makes your input setting autocomplete="one-time-code"
which allows using that feature.
Accessibility
Inputs do not have associated labels, set aria-label
to make component visible to screen reader:
PinInput component props
Name | Type | Description |
---|---|---|
autoFocus | boolean | If set, first input is focused when component is mounted |
defaultValue | string | Default value for uncontrolled component |
disabled | boolean | Sets inputs disabled attribute |
error | boolean | Adds error styles to all inputs |
form | string | Hidden input form attribute |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
id | string | The top-level id that is used as a base in all input fields |
inputMode | "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | inputmode attr, inferred from type prop if not specified |
inputType | HTMLInputTypeAttribute | Inputs type attribute, inferred from type prop if not specified |
length | number | Number of input boxes |
manageFocus | boolean | Determines whether focus should be moved automatically to the next input once filled |
mask | boolean | Changes input type to "password" |
name | string | Hidden input name attribute |
onChange | (value: string) => void | Called when value changes |
onComplete | (value: string) => void | Called when user enters value to all inputs |
oneTimeCode | boolean | Determines whether autocomplete="one-time-code" attribute should be set on all inputs |
placeholder | string | Placeholder for every input field |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
readOnly | boolean | Determines whether the user can edit input content |
required | boolean | Sets required on input element |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input width and height |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.spacing or any valid CSS value to set spacing between inputs |
type | "number" | RegExp | "alphanumeric" | The type of allowed values |
value | string | Value for controlled component |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
wrapperProps | Record<string, any> | Properties spread to root element |
PinInput component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-PinInput-root | Root element |
wrapper | .asuikit-PinInput-wrapper | Root Input element |
icon | .asuikit-PinInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-PinInput-input | Main input element |
rightSection | .asuikit-PinInput-rightSection | Input right section, controlled by rightSection prop |