Default
We sent a 6-digit code to priya@example.com. It expires in 10 minutes.
Show the codeHide the code
Default, code
<CodeInput hint="We sent a 6-digit code to priya@example.com. It expires in 10 minutes." />CodeInput
A one-time code in one input drawn as boxes, so paste and SMS or email autofill always work.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Single text input (one-time code)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Filled
We sent a 6-digit code to priya@example.com. It expires in 10 minutes.
Show the codeHide the code
Filled, code
<CodeInput
hint="We sent a 6-digit code to priya@example.com. It expires in 10 minutes."
defaultValue="4821"
/>Invalid
We sent a 6-digit code to priya@example.com. It expires in 10 minutes.Error: That code did not work. Check it, or ask for a new code.
Show the codeHide the code
Invalid, code
<CodeInput
hint="We sent a 6-digit code to priya@example.com. It expires in 10 minutes."
defaultValue="482193"
isInvalid
errorMessage="That code did not work. Check it, or ask for a new code."
/>Alphanumeric
Letters and numbers, as printed on your recovery sheet.
Show the codeHide the code
Alphanumeric, code
<CodeInput
label="Recovery code"
kind="alphanumeric"
length={8}
hint="Letters and numbers, as printed on your recovery sheet."
/>Tokens
The 13 design tokens CodeInput reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 13 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.border.brand | … | --sd-color-border-brand |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.disabled | … | --sd-color-text-disabled |
| font.family.mono | … | --sd-font-family-mono |
| input.bg | … | --sd-input-bg |
| input.bg-disabled | … | --sd-input-bg-disabled |
| input.border | … | --sd-input-border |
| input.border-invalid | … | --sd-input-border-invalid |
| input.fg | … | --sd-input-fg |
| input.height | … | --sd-input-height |
| input.radius | … | --sd-input-radius |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/code-inputThen import it
import { CodeInput } from "@/components/ui/code-input"Props
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Security code' | Visible label. Default "Security code". |
hint | string | |
errorMessage | string | ((validation: ValidationResult) => string) | |
length | numberDefault 6 | Number of characters. Default 6. |
kind | 'numeric' | 'alphanumeric'Default 'numeric' | numeric (default) or alphanumeric codes. |
When to use it
Use it for
- Sign-in and verification codes
- Recovery codes (kind alphanumeric)
Use something else for
- Passwords: use PasswordField
- PINs people choose: use PasswordField with inputMode numeric
Accessibility
Screen readers announce "Security code, edit text" then the digits as typed.
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Say where the code was sent and when it expires
- Offer to send a new code
Shared patterns it ships with: 3.3.9 (autocomplete one-time-code, paste allowed).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 95 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 18 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the one input |
| Typing fills the boxes; letters are ignored for numeric codes | |
| Backspace | Backspace removes the last digit |
| It stops at the code length |
In Figma
The Figma component is CodeInput, with State (Default, Hover, Focus, Disabled, Invalid); Length (4, 6, 8); Kind (Numeric, Alphanumeric). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Length → length (4 = 4, 6 = 6, 8 = 8); Kind → kind (Numeric = "numeric", Alphanumeric = "alphanumeric"); Value → defaultValue; nested Label → label; nested Hint → hint; nested FieldError → errorMessage.