> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# InputOTP
A short code split into one cell per character, for codes that arrive by mail or from an authenticator โ reach for `Input` for anything the reader knows by heart. Six cells by default, and `groupSize` inserts separators so the reader can check what they typed against what they were sent.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/InputOTP) ยท [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-otpinput--overview)
```tsx
import { OTPInput } from '@wallarm-org/design-system/InputOTP';
export const Basic = () => ;
```
## Usage
```tsx
import { OTPInput } from '@wallarm-org/design-system/InputOTP';
```
## Examples
### Disabled
All cells out together. The code is a single value, so cells are never disabled
individually.
```tsx
```
### With error
The invalid state across every cell, since a wrong code is wrong as a whole rather than in
one position.
```tsx
```
### Numeric
Numeric entry brings up the number keypad, and the `otp` flag lets a password manager or
the OS offer the code it has just received.
```tsx
```
### Masked
`mask` hides the characters as they are entered. Reserve it for codes worth hiding โ
masking a six-digit code the reader is copying off a screen only makes it harder.
```tsx
```
### With field
Inside `Field`, so the instruction above the cells comes from `FieldLabel` and
`FieldDescription` โ which is where to say where the code came from.
```tsx
import { Field, FieldLabel } from '@wallarm-org/design-system/Field';
import { OTPInput } from '@wallarm-org/design-system/InputOTP';
export const WithField = () => (
Label
);
```
## Props
### OTPInput
| Prop | Type | Default | Description |
| --------------- | ---------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
| groupSize | `number \| undefined` | `2` | Number of inputs per group (separator shown between groups). Set to 0 to disable grouping. |
| separator | `ReactNode` | `\u2014` | Separator element rendered between groups |
| error | `boolean \| undefined` | `false` | Error state (maps to Ark UI `invalid`) |
| form | `string \| undefined` | | The associate form of the underlying input element. |
| title | `string \| undefined` | | |
| mask | `boolean \| undefined` | | If `true`, the input's value will be masked just like `type=password` |
| pattern | `string \| undefined` | | The regular expression that the user-entered input value is checked against. |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string[] \| undefined` | | The initial value of the the pin input when rendered. Use when you don't need to control the value of the pin input. |
| autoFocus | `boolean \| undefined` | | Whether to auto-focus the first input. |
| id | `string` | | The unique identifier of the machine. |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
| type | `"numeric" \| "alphanumeric" \| "alphabetic" \| undefined` | | The type of value the pin-input should allow |
| disabled | `boolean \| undefined` | | Whether the inputs are disabled |
| name | `string \| undefined` | | The name of the input element. Useful for form submission. |
| value | `string[] \| undefined` | | The controlled value of the the pin input. |
| asChild | `boolean \| undefined` | | Use the provided child element as the default rendered element, combining their props and behavior. |
| ids | `ElementIds \| undefined` | | The ids of the elements in the pin input. Useful for composition. |
| placeholder | `string \| undefined` | | The placeholder text for the input |
| readOnly | `boolean \| undefined` | | Whether the pin input is in the valid state |
| required | `boolean \| undefined` | | Whether the pin input is required |
| onValueChange | `complex` | | Function called on input change |
| translations | `IntlTranslations \| undefined` | | Specifies the localized strings that identifies the accessibility elements and their states |
| onValueInvalid | `complex` | | Function called when an invalid value is entered |
| otp | `boolean \| undefined` | | If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`. |
| onValueComplete | `complex` | | Function called when all inputs have valid values |
| autoSubmit | `boolean \| undefined` | | Whether to auto-submit the owning form when all inputs are filled. |
| blurOnComplete | `boolean \| undefined` | | Whether to blur the input when the value is complete |
| selectOnFocus | `boolean \| undefined` | | Whether to select input value when input is focused |
| sanitizeValue | `((value: string) => string) \| undefined` | | Function to sanitize pasted values before validation. Useful for stripping dashes, spaces, or other formatting. |
| count | `number \| undefined` | `6` | The number of inputs to render to improve SSR aria attributes. This will be required in next major version. |
| data-testid | `string \| undefined` | | |