Input OTP

One-time password input with individual character slots. Accepts digits only by default.

Installation

Install the component using the StarUI CLI:

star add input-otp

Accepts both letters and digits instead of digits only.

Pre-filled partial value with disabled state.

Signal-bound input with reactive display of the entered value.

Entered: 42

Inside a form with name attribute for submission.

Enter the code sent to your email

Prop	Type	Default	Description
`max_length`	`int`	`6`	Maximum number of characters
`value`	`str`	`''`	Initial OTP value
`signal`	`str \| Signal`	`auto-generated`	Datastar signal name for reactive binding
`allow`	`str \| None`	`REGEXP_ONLY_DIGITS`	Regex character class for input filtering (e.g. r'\d' for digits). None disables filtering
`input_mode`	`str`	`'numeric'`	Mobile keyboard type (numeric, text, etc.)
`disabled`	`bool`	`False`	Disables the input
`name`	`str \| None`	`None`	Form field name for submission
`autocomplete`	`str`	`'one-time-code'`	Autocomplete hint for the browser
`cls`	`str`	`''`	Additional CSS classes

Component	Description
`InputOTP`	Root container with hidden input and signal management
`InputOTPGroup`	Groups slots with shared borders (passthrough closure)
`InputOTPSlot`	Displays a single character at the given index with caret animation (closure). Requires index: int
`InputOTPSeparator`	Visual divider between groups. Defaults to a minus icon, override with *children