Form

Code Input

One-time-code entry cells for verification flows.

All components Registry setup

Preview

components/ui/code-input.tsx

Interactive

Validation

You thought that was the code? Wrong, try again.

Install

pnpm dlx shadcn@latest add @rhythmic-ui/code-input

Code Input API

Use it as one real input. Keep value in state, handle onValueChange, and move validation into onComplete.

const [code, setCode] = React.useState("")
const [state, setState] = React.useState<"default" | "success" | "error">("default")

<CodeInput
  value={code}
  state={state}
  error={state === "error" ? "Wrong, try again." : undefined}
  onValueChange={(nextCode) => {
    setCode(nextCode)
    setState("default")
  }}
  onComplete={(nextCode) => {
    setState(nextCode === expectedCode ? "success" : "error")
  }}
/>

Registry URL

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/code-input.json