# Bootstrap 6 One Time Password (OTP) Input > Create secure and user-friendly one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows. ## Example Use the `form-otp` wrapper with `data-coreui-otp` to create an one-time password input field with automatic character navigation and validation. ```html
``` ## With form field Wrap the control in [`.form-field`](https://coreui.io/bootstrap/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. ```html
Verification code
We sent it to your phone a moment ago.
``` ## One-time password types The one-time password input supports different input types for various use cases. ```html
``` ## Placeholders Provide visual hints to users by setting placeholder text for OTP input fields. You can use a single character for all fields or specify different placeholders for each field. ```html
``` ## Pre-filled values Set initial values using the `data-coreui-value` attribute. ```html
``` ## Input modes Control user input behavior with linear and non-linear modes. ```html
``` ## Auto-submit Enable automatic form submission when all one-time password fields are completed. ```html
``` ## Custom layouts Create custom one-time password layouts with separators and different field counts. ```html
-
•
•
``` ## Grouped cells Wrap cells in `.form-otp-group` 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
``` ## 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. To adjust the size of a component, use `.form-otp-lg` or `.form-otp-sm`. ```html
``` ## Disabled Disable the entire one-time password input by adding the `data-coreui-disabled="true"` attribute. ```html
``` ## Validation The code is validated as one value, kept in an input laid invisibly over the group. With `data-coreui-required="true"` an empty or incomplete code blocks the submit, and an incomplete code blocks it even when the field is not required; the browser, or the [form plugin](https://coreui.io/bootstrap/docs/forms/validation/#usage) in a form with `novalidate`, puts focus on the first empty slot, the browser with its own message over the group. The state shows on the group as `.is-{state}`, which colours every slot and shows the `.invalid-feedback` that follows the group, and while it is `'invalid'` every slot carries `aria-invalid="true"` and is described by that message. Every change of the code sends `input` and `change` from the input that holds the value. ```html
Verification code
Enter the six digits we sent you.
``` The state comes from four places, in this order: - The `validationState` option: `'valid'`, `'invalid'` or a state you added to `$form-validation-states`. - An `.is-invalid` or `.is-valid` class written on the `.form-otp` element or on a slot in the markup, for example by a server that has already checked the code. It is read once, when the component starts, and moves to the group, since the code is one value. - A validation that reports the code invalid: a submit, `checkValidity()` or `reportValidity()`, which the form plugin and the [stepper](https://coreui.io/bootstrap/docs/forms/stepper/) call as well. From then on the group shows it invalid whenever the code is invalid, until a native reset of the form. - In a form with `data-coreui-validate`, the `:user-invalid` state of the input that holds the value, and with `data-coreui-validate="valid"` also its `:user-valid` state. A state you give, with the option or with the class, is a verdict on the code it was given for, so the next change of the code the user makes drops it: typing or deleting a character, a paste or an autofill. A keystroke that leaves the code as it was keeps it. One action drops the state once, at its first change, so a state you give from a `change.coreui.otp-input`, `input` or `change` listener while the action runs stays. A change your own code makes with `clear()`, `reset()` or `setValue()` keeps it. To set it again, call `setValidationState()`: it also replaces a class written in the markup, so `setValidationState(null)` withdraws that class. The component does not read `aria-invalid` on the group or a slot, and a state class written after it started only paints the group: the slots get no `aria-invalid` and the submit is not blocked, so change the state after start with `setValidationState()`. While the given state is `'invalid'`, the code blocks the submit with the text of the linked message, or `Invalid value.` when there is none; a disabled code does not block. A message placed where the stylesheet does not show it for the group can be named in `data-coreui-invalid-feedback` on the `.form-otp` element. A native reset of the form puts back the code the field started with and drops a state given before it; a state you give from a `reset` listener on the form, or right after `form.reset()`, stays. ```html Verification code
This code has expired. Request a new one.
``` ## 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 - **Label click**: clicking a label that names the field, through `aria-labelledby` or a `