### dataHook
- type: string
- description: Applies a data-hook HTML attribute that can be used in tests.
### className
- type: string
- description: Specifies a CSS class name to be appended to the component's root element.
- internal
### id
- type: string
- description: Assigns a unique identifier to the input. Give a `FormField` the same `id` and clicking its label focuses the input, like it does for `Input`.
### name
- type: string
- description: Sets the name of the input, so the code is submitted with a native `<form>`.
### size
- type: "small" | "tiny" | "medium" | "large"
- description: Controls the size of the slots. The default heights and text sizes match `Input` in every theme.
- default: 'medium'
### length
- type: number
- description: Sets the number of characters in the code, and the number of slots shown when no children are passed.
- default: 6
### value
- type: string
- description: Sets the entered code. Use it with `onChange` to control the component.
### defaultValue
- type: string
- description: Sets the initial code when the component isn't controlled with `value`.
### onChange
- type: (value: string) => void
- description: Defines a callback function which is called every time the entered code changes.
### onComplete
- type: (value: string) => void
- description: Defines a callback function which is called when an edit leaves a complete, changed code, whether by typing, pasting or autofill. After `focus()` selects the first slot of a complete code, the user is retyping it, so the call waits until the last slot is filled; clicking a slot or using the arrow keys to fix a single digit calls it right away. It isn't called when `value` changes from outside or when an edit changes nothing.
### status
- type: "error" | "warning" | "loading"
- description: Sets the status of the slots. Inside a `FormField` the status of the `FormField` is used unless this prop is set, and the message comes from the `FormField`. The status only changes how the slots look; call `clear()` on the ref to empty them. `loading` doesn't change the slots and only marks the input as busy, so show the progress in the `FormField` message.
### disabled
- type: boolean
- description: Specifies whether the input is disabled.
- default: false
### readOnly
- type: boolean
- description: Specifies whether the code can't be edited, for example while it is verified.
- default: false
### autoFocus
- type: boolean
- description: Specifies whether the input is focused when the component mounts. Use it when the code is the main task on the screen, such as a two-step login step.
- default: false
### onFocus
- type: FocusEventHandler
- description: Defines a standard input onFocus callback.
### onBlur
- type: FocusEventHandler
- description: Defines a standard input onBlur callback.
### ariaLabel
- type: string
- description: Sets the accessible name of the input, for example "Verification code".
### ariaLabelledBy
- type: string
- description: Associates the input with an element that labels it. Inside a `FormField` this defaults to its label.
### children
- type: ReactNode
- description: Arranges the slots into groups with `OTPInput.Group`, `OTPInput.Slot` and `OTPInput.Separator`. Without children, `length` slots are shown in one row.
### ref
- type: null | string | (instance: OTPInputImperativeActions | null) => void | RefObject<OTPInputImperativeActions>
- description: Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).