A six-cell one-time code entry with paste, auto-advance and onComplete.
OtpInput is one real input per cell with roving focus. Pasting a full code fills every cell and fires onComplete.
Installation
npx shadcn@latest add KezLahd/rime/otp-inputAlso installs: base, field.
Usage
import { OtpInput } from "@/components/ui";
<OtpInput aria-label="Authenticator code" value={code} onChange={setCode} onComplete={verify} />Examples
Default
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
OtpInput
| Prop | Type | Default | Description |
|---|---|---|---|
| valueRequired | string | ||
| onChangeRequired | (value: string) => void | ||
| onComplete | (value: string) => void | Fires once when every box holds a digit, e.g. to auto-submit. | |
| length | number | 6 | |
| invalid | boolean | ||
| disabled | boolean | ||
| autoFocus | boolean | ||
| aria-label | string | Required when not inside a <Field group>. | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --field-focus-border | rgba(var(--rgb-brand), 0.75) | … |
| --field-focus-ring | var(--focus-halo) | … |
| --field-focus-ring-invalid | 0 0 0 4px rgba(var(--rgb-danger), 0.14) | … |
| --field-hover-border | rgba(var(--rgb-brand-deep), 0.3) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
| --danger-base | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-halo | tokens.css | … |
| --font-mono | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --line-input | tokens.css | … |
| --r-md | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --shadow-input | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
Accessibility
- autocomplete="one-time-code" on the first cell lets phones offer the SMS code.
Do and don't
Do
- Verify on onComplete; don't make users press a button too.
Don't
- Don't clear the code on a wrong attempt without saying why.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open otp-input.md