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 — Base UI
pin-input.tsx
1234567891011121314import { PinInput } from "#components/ui/base-ui/pin-input.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { // Base UI ships no pin-input machine — the component composes the recipe // with useRender/mergeProps around per-digit inputs with focus management return ( <PinInput length={4} defaultValue={["3", "1", "", ""]} variant="outline" size="md" palette={indigoPalette} aria-label="One-time code" /> );}
// controlled: <PinInput value={digits} onValueChange={setDigits} />// composition: <PinInput render={<fieldset />} />