All components
Pin Input
One-time code entry with per-digit boxes in outline, subtle, and flushed variants.
Variants
outline
subtle
flushed
Sizes
xs
sm
md
lg
xl
Install
zsh — pin-input
1bunx stylexblocks add pin-inputUsage — Ark UI
pin-input.tsx
12345678910111213141516171819import { PinInput } from "#components/ui/ark-ui/pin-input.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; every Input inherits them <PinInput.Root defaultValue={["3", "1", "", ""]} variant="outline" size="md" palette={indigoPalette} aria-label="One-time code"> <PinInput.Control> {[0, 1, 2, 3].map((index) => ( <PinInput.Input key={index} index={index} /> ))} </PinInput.Control> <PinInput.HiddenInput /> </PinInput.Root> );}
// controlled: <PinInput.Root value={digits} onValueChange={(d) => setDigits(d.value)}>