# OneTimeCode

A one-time code, one digit to a cell, that fills itself from the message it came in.

- Family: Forms, imported from `mizu-ui` or `mizu-ui/forms`
- Docs: https://mizu.user64bit.world/components/one-time-code
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/forms/OneTimeCode.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { OneTimeCode } from "mizu-ui";

export function Example() {
  const [code, setCode] = useState("");
  const wrong = code.length === 6 && code !== "424242";
  return (
    <>
      <OneTimeCode
        label="Sign-in code"
        hint="This demo accepts 424242."
        value={code}
        onValueChange={setCode}
        error={
          wrong
            ? "That code doesn’t match. Check the email and try again."
            : undefined
        }
      />
      {code === "424242" && (
        <p role="status" className="mizu-field-hint">
          Signed in.
        </p>
      )}
    </>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/one-time-code
```

## Props

- `label / hint / error`: `string`. Visible label, help text and validation feedback, linked to the input.
- `value / defaultValue / onValueChange`: `string / string / (code: string) => void`. Controlled or initial code. Anything that isn't a digit is dropped, so pasted codes with spaces or dashes arrive clean.
- `onComplete`: `(code: string) => void`. Called whenever the code reaches its full length, typed, pasted or filled in by the platform.
- `length`: `number` (default `6`). How many digits, from 1 to 12.
- `name / required / disabled / autoFocus`: `string / boolean`. Native form name, validation and states. A partial code fails native validation.

## Accessibility

One real text input with autocomplete=one-time-code and a numeric keyboard, so SMS and email autofill, paste and assistive technology work as they do anywhere. The cells are drawn for sight only; the input is labelled, described and reads as the whole code.

## Motion

The active cell takes the accent; the caret blinks there unless motion is reduced.