```
### Controlled
Pass `value` and the slots render exactly what you pass — typing only fires `onChange`. Feed the change back, or nothing moves.
```html
import React, { useState } from 'react'
import { CButton, COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordControlledExample = () => {
const [code, setCode] = useState('')
return (
<>
setCode('')}>
Clear
Current code: {code || '-'}
)
}
```
Use it when the code belongs to something else: form state, a reset button, or a value you validate before accepting it.
## Input modes
Control user input behavior with linear and non-linear modes.
```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordInputModesExample = () => {
return (
<>
)
}
```
## Auto-submit
Enable automatic form submission when all one-time password fields are completed.
```html
import React from 'react'
import { CButton, CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordAutoSubmitExample = () => {
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault()
console.log('Form submitted!')
alert('Form submitted automatically!')
}
return (
Manual Submit
)
}
```
## Custom layouts
Create custom one-time password layouts with separators and different field counts.
```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordCustomLayoutsExample = () => {
return (
<>
)
}
```
## Grouped cells
Wrap cells in `` to join them into one field: the cells share their borders and only the outer corners keep the radius. One group joins the whole code; several groups split it into segments, spaced by the `--cui-form-otp-gap` of the wrapper.
```html
import React from 'react'
import { COneTimePassword, COneTimePasswordGroup, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordGroupedExample = () => {
return (
<>
)
}
```
## Sizing variants
One-time password input supports different sizes. You may choose from small, normal (default), and large inputs to match our similarly sized text inputs.
```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordSizingExample = () => {
return (
<>
)
}
```
## Disabled
Disable the entire one-time password input by adding the `disabled` prop.
```html
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordDisabledExample = () => {
return (
)
}
```
## Validation
The code is validated as one value, kept in an input laid invisibly over the group. With `required` an empty or incomplete code blocks the submit, and an incomplete code blocks it even when the field is not required; the browser puts focus on the first empty slot and shows its own message over the group. The state shows on the group as the `.is-*` class, and while it is `'invalid'` every slot carries `aria-invalid="true"` and is described by the message after the group: the `feedbackInvalid` text, the `feedback` text while you give a state, or an `.invalid-feedback` you render after the field yourself. The hidden input holds the new code by the time `onChange` and `onComplete` run, and sends `input` and `change` once the code has rendered, also when your code changes it through `value`.
```html
import React, { useState } from 'react'
import { CButton, CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'
export const OneTimePasswordValidationExample = () => {
const [backupCodeState, setBackupCodeState] = useState('invalid')
return (
Verify
)
}
```
The state comes from three places, in this order:
- `validationState`: `'valid'`, `'invalid'` or a state you added to `$form-validation-states`; `invalid` and `valid` still work as aliases. While it is set, the component draws it instead of what the browser reports. While it is `'invalid'`, the code blocks the submit with the text of the linked message, or `Invalid value.` when there is none, unless the component is `disabled`.
- A validation that reports the code invalid: a submit, `checkValidity()` or `reportValidity()`, which [`CForm`](https://coreui.io/react/docs/forms/validation/) and the stepper call as well. From then on the group and the slots show it invalid whenever the code is invalid, until the form is reset, and the message after the group shows.
- In a form with `validate`, the `:user-invalid` state of the hidden input, and with `validate="valid"` also its `:user-valid` state.
A state you give is a verdict on the code it was given for. When the user types, deletes, pastes or autofills a different code, or the form is reset, the component calls `onValidationStateChange(undefined)`; pass your state setter there to drop the state, as the second field above does. A change your code makes through `value` keeps it, and so does a keystroke that leaves the code as it is. A reset asks once it has run, so a state you set from a `reset` listener on the form gets the same call, and your handler decides whether to drop it. A native reset of the form puts back the code given by `defaultValue`, and leaves a controlled `value` to you. An `aria-invalid` passed to the component or to a slot is not read; set the state with `validationState`.
## Accessibility
The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs.
- **ARIA Labels**: Each input field automatically receives descriptive `aria-label` attributes
- **Role Attribute**: The container has `role="group"` to indicate related form controls, named by `label`
- **Label click**: clicking the label that names the group moves focus to the first empty slot, as clicking the label of an input focuses it
- **Required**: with `required`, every slot carries `aria-required="true"`, since the value input that holds `required` is hidden from assistive technologies
- **Keyboard Navigation**: Full keyboard support with arrow keys, tab, and backspace
- **Screen Reader Support**: Clear announcements when values change; while the code is reported invalid, every slot carries `aria-invalid="true"` and the error message
- **Focus Management**: Automatic focus handling for seamless navigation
- **Autofill**: only the first field advertises `autocomplete="one-time-code"`, so SMS autofill and password managers target a single field; a code delivered that way is spread across the slots automatically, exactly like a paste
### Customizing accessibility
You can customize the aria-label generation function to provide more specific descriptions:
```jsx
`Enter digit ${index + 1} of your ${total}-digit verification code`}
/>
```
### Keyboard support
The one-time password input component provides comprehensive keyboard navigation support:
| Key | Action |
| --- | --- |
| Arrow Right | Move focus to next input field |
| Arrow Left | Move focus to previous input field |
| Backspace | Delete current character and move to previous field (if empty) |
| Tab | Move to next focusable element (respects linear mode) |
| Shift + Tab | Move to previous focusable element |
| Ctrl + V / Cmd + V | Paste clipboard content and auto-fill fields |
## API
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
- [<COneTimePassword />](./api/#conetimepassword)
- [<COneTimePasswordInput />](./api/#conetimepasswordinput)