Primitives
OTPField
A one-time code in length cells, held as one string
Six digits from your authenticator.
123456
The code does not match.Usage
import { OTPField, Label, Stack } from "@gpuixui/primitives";
import { useState } from "react";
const [code, setCode] = useState("");
<Stack direction="column" gap="xs">
<Label description="Six digits from your authenticator">
Verification code
</Label>
<OTPField
label="Verification code"
value={code}
onValueChange={setCode}
onComplete={(complete) => verify(complete)}
/>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
length | number | 6 | number of cells; a stored value that is not a number is six, and a number that cannot be laid out resolves to one |
value | string | — | controlled code, normalised to letters/digits; a stored value that is not text is no code |
defaultValue | string | — | initial code when uncontrolled; a stored value that is not text is no code |
onValueChange | (value: string) => void | — | the code after every edit that changed it |
onChange | (value: string) => void | — | deprecated alias for onValueChange |
onComplete | (value: string) => void | — | fires when an edit makes the code full |
onSubmit | (event: EventPayload) => void | — | Enter in any cell, with the code unchanged |
size | "sm" | "md" | "lg" | "md" | cell height and width, from the density scale |
disabled | boolean | false | read-only, out of the tab order, inert |
invalid | boolean | false | destructive border on every cell |
label | string | none | group name; each cell is named <label> digit N |
description | string | none | announced help, carried by every cell (aria-description) |
autoFocus | boolean | false | focuses the first cell on mount |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StateStyle<FieldState> | — | on the group; resolved against the live state, merged last |
children | ReactNode | length cells | the cell parts to draw |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with each cell's own, on every cell |
ref / aria-id / onLayout | host props | none | land on the first cell; the code belongs to the group |
testId | string | — | the group's locator; cells are <testId>-cell-N |
Edit this page on GitHubpackages/primitives/docs/otp-field.mdx