> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/input-otp.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# InputOTP

Enter and paste verification codes.

## Basic usage


Completed: —

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/input-otp/basic.tsx"
import { InputOTP, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function InputOTPBasic() {
  const [value, setValue] = useState('');
  const [complete, setComplete] = useState('');
  return (
    <Space direction="vertical" align="stretch">
      <InputOTP value={value} onChange={setValue} onComplete={setComplete} />
      <output>
        <Text tone="muted">Completed: {complete || '—'}</Text>
      </output>
    </Space>
  );
}
```

Expand code

## More examples


Letters and digits

—

Masked charactersDisabled

123456

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/input-otp/advanced.tsx"
import { InputOTP, Space, Text } from '@ifhover/leaf-ui';

export function InputOTPOptions() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">Letters and digits</Text>
      <InputOTP
        mode="alphanumeric"
        length={8}
        separator={(index) => (index === 3 ? <span>—</span> : null)}
      />
      <Text tone="muted">Masked characters</Text>
      <InputOTP length={4} mask size="lg" />
      <Text tone="muted">Disabled</Text>
      <InputOTP defaultValue="123456" disabled />
    </Space>
  );
}
```

Expand code

## Usage

Preserves one input for paste and one-time-code autofill. onComplete indicates complete input; validate the code on your server.

## Types

Import these types for data, callbacks and refs.

```ts
import type { InputOTPProps } from '@ifhover/leaf-ui';
```

## InputOTPProps API

| Property       | Type                           | Default     | Description                                         |
| -------------- | ------------------------------ | ----------- | --------------------------------------------------- |
| `length`       | `number`                       | `6`         | Code character count                                |
| `value`        | `string`                       | —           | Controlled value                                    |
| `defaultValue` | `string`                       | `''`        | Initial value, restored by uncontrolled form resets |
| `onChange`     | `(value: string) => void`      | —           | Value change callback                               |
| `onComplete`   | `(value: string) => void`      | —           | Called when input is complete                       |
| `mode`         | `'numeric' \| 'alphanumeric'`  | `'numeric'` | Display mode or allowed characters                  |
| `mask`         | `boolean \| string`            | `false`     | Mask displayed characters                           |
| `separator`    | `(index: number) => ReactNode` | —           | Separator by position                               |
| `size`         | `'sm' \| 'md' \| 'lg'`         | `'md'`      | Size or spacing preset                              |
| `status`       | `'error' \| 'warning'`         | —           | Display state                                       |