One-time code entry for email and SMS verification flows.
One-time code entry for email and SMS verification flows.
import { PinInput } from '@var-ui/react';
<PinInput label="Verification code" length={4} defaultValue="1234" autoFocus />Uses a role="group" wrapper with one text input per digit. Each cell has an aria-label for its position, and the first cell sets autocomplete="one-time-code" so mobile browsers can suggest codes from SMS.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | — |
autoFocus | boolean | undefined | — | — |
className | string | undefined | — | — |
defaultValue | string | undefined | — | Initial value for uncontrolled usage. |
description | string | undefined | — | Helper text shown below the control when there is no error. |
errorMessage | string | undefined | — | Validation message; when set, the field is shown in an error state. |
isDisabled | boolean | undefined | — | — |
isRequired | boolean | undefined | — | — |
label | string | undefined | — | Visible label rendered above the control. |
length | number | undefined | 4 | Number of digit cells. |
onChange | ((value: string) => void) | undefined | — | Called when any cell changes. |
onComplete | ((value: string) => void) | undefined | — | Called once when every cell is filled. |
size | ControlSize | undefined | — | — |
type | PinInputType | undefined | numeric | Accepted characters. |
value | string | undefined | — | Controlled value — one character per cell, no separators. |
Theme this component via createDesignTheme({ components: { pinInput: … } }).
See Customize for the full override API.
Public classes and data attributes from @var-ui/core pinInput().
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input__label | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input__group | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input__cell | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input__description | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
| Name | Example | Description |
|---|---|---|
class | var-ui-pin-input__error | Root / part class name |
data-size | md | Recipe variant / state attribute from `@var-ui/core`. |
Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.