# OtpField

> A one-time-code field: a native `<input>` defaulting to a numeric virtual keyboard and the platform's SMS/email autofill hint for one-time codes, built on Input for its box, color, and interaction-state styling.

```ts
import { OtpField } from "@sdxc/ui";
```

Renders a single native `<input>` for entering a one-time verification
code, built on Input, sized as one full-width control since a
single `<input>` is what carries `autoComplete="one-time-code"` reliably.

## Examples

```tsx
<Label htmlFor="otp">{t("auth.otp.label")}</Label>
<OtpField id="otp" name="code" autoFocus />
```

```tsx
<OtpField
	id="otp"
	name="code"
	aria-describedby="otp-error"
	aria-invalid="true"
/>
<FieldError id="otp-error">{t("auth.otp.invalid")}</FieldError>
```

```tsx
<OtpField
	id="invite-code"
	name="inviteCode"
	length={8}
	inputMode="text"
	autoComplete="off"
	pattern="[A-Za-z0-9]*"
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `length?` | `number` | The one-time code's character count, applied as the control's native `maxLength`. Defaults to DEFAULT_LENGTH. |
| `inputMode?` | `Input.Props["inputMode"]` | Virtual-keyboard hint passed straight through to the native `inputMode` attribute. Defaults to DEFAULT_INPUT_MODE, requesting the numeric keypad; set it to `"text"` for a code that mixes in letters. |
| `autoComplete?` | `Input.Props["autoComplete"]` | Platform autofill hint passed straight through to the native `autoComplete` attribute. Defaults to DEFAULT_AUTO_COMPLETE, which a browser or OS keyboard looks for to offer an SMS or email code inline. |

Also accepts everything in `Omit<
		Input.Props,
		"type" | "list" | "role" | "inputMode" | "autoComplete" | "maxLength"
	>`.