InputOtp

Input OTP fields collect short one-time codes with single-character cells, keyboard navigation, paste distribution, and form submission support.

Verification code

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="input-otp"][data-part="root"] left_clickLMBCopy
<div>	group	[data-scope="input-otp"][data-part="group"] left_clickLMBCopy
<input>	nativeconditional	[data-scope="input-otp"][data-part="native"] left_clickLMBCopy
<input>	input	[data-scope="input-otp"][data-part="input"] left_clickLMBCopy

Props

Name	Description	Default	Control
idOptional	Optional explicit id prefix for the native controls. string | undefined	undefined	-
lengthOptional	Number of characters in the code. number | undefined	6
sizeOptional	Visual size of each input cell. smalllargemedium	"medium"	smalllargecheckmedium
typeOptional	Restrict input to digits. numbertext	"number"	checknumbertext
maskOptional	Whether to hide entered characters. boolean | undefined	false
invalidOptional	Whether the controls are visually invalid. boolean | undefined	false
disabledOptional	Whether the controls are disabled. boolean | undefined	false
requiredOptional	Whether the controls are required. boolean | undefined	false
readonlyOptional	Whether the controls are readonly. boolean | undefined	false
nameOptional	Name attribute for form submissions. string | undefined	undefined	-
placeholderOptional	Placeholder shown in each empty cell. string | undefined	undefined
autocompleteOptional	Autocomplete hint for the first control. string | undefined	"one-time-code"	-
inputModeOptional	Input mode hint for virtual keyboards. textsearchnonetelurlemailnumericdecimal	undefined	-
modelValueOptional	- string | undefined	""

Events7

Name	Type	Description
update:modelValue	[value: string]	-
input	[event: Event]	-
change	[event: Event]	-
focus	[event: FocusEvent]	-
blur	[event: FocusEvent]	-
keydown	[event: KeyboardEvent]	-
complete	[value: string]	-

Slots0

No slots documented.

Styling18

Preview

Token	Description
--md-input-otp-caret-colorColor Fallbackvar(--md-sys-color-primary)	Controls caret color.
--md-input-otp-container-shapeShape Fallbackvar(--md-shape-field-square)	Controls container shape.
--md-input-otp-disabled-opacityDisabled Fallback0.38	Controls disabled opacity.
--md-input-otp-error-caret-colorColor Fallbackvar(--md-sys-color-error)	Controls error caret color.
--md-input-otp-error-outline-colorColor Fallbackvar(--md-sys-color-error)	Controls error outline color.
--md-input-otp-focus-outline-colorFocus Fallbackvar(--md-sys-color-primary)	Controls focus outline color.
--md-input-otp-focus-outline-widthFocus Fallback0.1875rem	Controls focus outline width.
--md-input-otp-hover-outline-colorState Fallbackvar(--md-sys-color-on-surface)	Controls hover outline color.
--md-input-otp-input-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls input text color.
--md-input-otp-input-text-fontTypography Fallbackvar(--md-sys-typescale-title-medium-font)	Controls input text font.
--md-input-otp-input-text-line-heightTypography Fallbackvar(--md-sys-typescale-title-medium-line-height)	Controls input text line height.
--md-input-otp-input-text-sizeLayout Fallbackvar(--md-sys-typescale-title-medium-size)	Controls input text size.
--md-input-otp-input-text-weightTypography Fallbackvar(--md-sys-typescale-title-medium-weight)	Controls input text weight.
--md-input-otp-large-container-sizeLayout Fallback3.5rem	Controls large container size.
--md-input-otp-medium-container-sizeLayout Fallback3rem	Controls medium container size.
--md-input-otp-outline-colorColor Fallbackvar(--md-sys-color-outline)	Controls outline color.
--md-input-otp-outline-widthLayout Fallback0.0625rem	Controls outline width.
--md-input-otp-small-container-sizeLayout Fallback2.5rem	Controls small container size.

Examples

Default

Verification code

Enter the 6-digit code sent to your device.

Value: Empty

States

The code is incomplete.