# OTP Input Capture one-time passwords with a series of individual input fields. ```blade ``` ## Example usage Display a form for verifying one-time passwords. ```blade
Verify your account Please enter a one-time password from the authenticator app.
Verify Resend code
``` ## Autosubmit Use the `submit="auto"` prop to automatically submit the form once all input fields are filled. ```blade
Verify your account Please enter a one-time password from the authenticator app.
``` ## Alphanumeric Allow non-numeric characters by setting the `mode` to `alphanumeric` or `alpha`. ```blade ``` ## Private To mask sensitive input values, use the `private` prop. ```blade ``` ## Separator Use the default slot to render input fields with a separator in between them. ```blade ``` ## Group Group all input fields together using the `flux:otp.group` component. ```blade ``` ## Group separator Add a separator between groups of input fields using the `flux:otp.separator` component. ```blade ``` ## Related - [Field](https://fluxui.dev/components/field) - Structured form field with label and validation - [Input](https://fluxui.dev/components/input) - Text fields for collecting user input ## Reference ### flux:otp **Prop:** - `wire:model` - Binds the value to a Livewire property. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. - `value` - The current value as a string. - `length` - The number of input fields to display. - `mode` - The input mode. Can be `numeric` (default), `alphanumeric`, or `alpha`. - `private` - Sets the input fields to `private` type to mask the input values. - `submit` - Keyboard behavior for form submission. Options: (default), `auto` to submit when all fields are filled. - `autocomplete` - Sets the autocomplete attribute for the first input field. Use `off` to disable browser autofill. Default: `one-time-code`. **Slot:** - `default` - Custom input fields and separators. When used, the `length` prop is ignored. ### flux:otp.input **Prop:** - `—` - — ### flux:otp.separator **Prop:** - `—` - — ### flux:otp.group **Slot:** - `Default` - The input fields to include in the group.