# InputOTP

A verification code split into slots.

## How to use it

Set maxLength and an index for each slot. Your server must validate the code; the component only collects input.



## Import


```tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<InputOTP maxLength={6} aria-label="Verification code"><InputOTPGroup>{[0,1,2,3,4,5].map(index => <InputOTPSlot key={index} index={index} />)}</InputOTPGroup></InputOTP>
```


## API: InputOTP


```typescript
InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | undefined \| ReactNode | Yes | Content or child elements of the component. |
| maxLength | number | Yes | Maximum number of characters. |
| alt | string | No | Alternative text for the image. |
| aria-label | string | No | Accessible name of the control. |
| autoComplete | HTMLInputAutoCompleteAttribute | No | Tell the browser which autocomplete type to use. |
| checked | boolean | No | Controlled selection state. |
| className | string | No | Additional CSS classes to customize the element. |
| containerClassName | string | No | See the published type. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| max | string \| number | No | Maximum allowed value. |
| min | string \| number | No | Minimum allowed value. |
| name | string | No | Name used to identify the control in forms. |
| nonce | string | No | See the published type. |
| noScriptCSSFallback | string \| null | No | See the published type. |
| onChange | ((newValue: string) => unknown) | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLInputElement> | No | Action performed when the element is activated. |
| onComplete | ((...args: any[]) => unknown) | No | Callback when input or an operation is complete. |
| onSubmit | SubmitEventHandler<HTMLInputElement> | No | Form submission event. |
| pasteTransformer | ((pasted: string) => string) | No | See the published type. |
| placeholder | string | No | Short hint displayed when there is no value. |
| pushPasswordManagerStrategy | "none" \| "increase-width" | No | See the published type. |
| render | InputOTPRenderFn \| undefined | No | See the published type. |
| required | boolean | No | Indicates that a value is required. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| src | string | No | Resource path or URL. |
| step | string \| number | No | Increment between values. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| textAlign | "center" \| "left" \| "right" | No | See the published type. |
| title | string | No | Title or supplementary information. |
| type | HTMLInputTypeAttribute | No | Operation type or mode; values depend on the component. |
| value | string | No | Controlled value. Update it from the change callback. |

## API: InputOTPGroup


```typescript
InputOTPGroup: React.ForwardRefExoticComponent<InputOTPGroupProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: InputOTPSlot


```typescript
InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| index | number | Yes | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: InputOTPSeparator


```typescript
InputOTPSeparator: React.ForwardRefExoticComponent<InputOTPSeparatorProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/input-otp