InputOtp

OTP 输入框用于收集简短的一次性验证码，提供单字符输入格、键盘导航、粘贴分配和表单提交支持。

验证码

示例

默认

Verification code

Enter the 6-digit code sent to your device.

Value: Empty

状态

The code is incomplete.

参考

结构

高亮显示

元素	部件	选择器
<div>	root	[data-scope="input-otp"][data-part="root"] left_click鼠标左键单击复制
<div>	group	[data-scope="input-otp"][data-part="group"] left_click鼠标左键单击复制
<input>	native条件显示	[data-scope="input-otp"][data-part="native"] left_click鼠标左键单击复制
<input>	input	[data-scope="input-otp"][data-part="input"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
id可选	Optional explicit id prefix for the native controls. string | undefined	undefined	-
length可选	Number of characters in the code. number | undefined	6
size可选	Visual size of each input cell. smalllargemedium	"medium"	smalllargecheckmedium
type可选	Restrict input to digits. numbertext	"number"	checknumbertext
mask可选	Whether to hide entered characters. boolean | undefined	false
invalid可选	Whether the controls are visually invalid. boolean | undefined	false
disabled可选	Whether the controls are disabled. boolean | undefined	false
required可选	Whether the controls are required. boolean | undefined	false
readonly可选	Whether the controls are readonly. boolean | undefined	false
name可选	Name attribute for form submissions. string | undefined	undefined	-
placeholder可选	Placeholder shown in each empty cell. string | undefined	undefined
autocomplete可选	Autocomplete hint for the first control. string | undefined	"one-time-code"	-
inputMode可选	Input mode hint for virtual keyboards. textsearchnonetelurlemailnumericdecimal	undefined	-
modelValue可选	- string | undefined	""

事件7

名称	类型	说明
update:modelValue	[value: string]	-
input	[event: Event]	-
change	[event: Event]	-
focus	[event: FocusEvent]	-
blur	[event: FocusEvent]	-
keydown	[event: KeyboardEvent]	-
complete	[value: string]	-

样式18

预览

Token	说明
--md-input-otp-caret-colorColor 回退值var(--md-sys-color-primary)	Controls caret color.
--md-input-otp-container-shapeShape 回退值var(--md-shape-field-square)	Controls container shape.
--md-input-otp-disabled-opacityDisabled 回退值0.38	Controls disabled opacity.
--md-input-otp-error-caret-colorColor 回退值var(--md-sys-color-error)	Controls error caret color.
--md-input-otp-error-outline-colorColor 回退值var(--md-sys-color-error)	Controls error outline color.
--md-input-otp-focus-outline-colorFocus 回退值var(--md-sys-color-primary)	Controls focus outline color.
--md-input-otp-focus-outline-widthFocus 回退值0.1875rem	Controls focus outline width.
--md-input-otp-hover-outline-colorState 回退值var(--md-sys-color-on-surface)	Controls hover outline color.
--md-input-otp-input-text-colorColor 回退值var(--md-sys-color-on-surface)	Controls input text color.
--md-input-otp-input-text-fontTypography 回退值var(--md-sys-typescale-title-medium-font)	Controls input text font.
--md-input-otp-input-text-line-heightTypography 回退值var(--md-sys-typescale-title-medium-line-height)	Controls input text line height.
--md-input-otp-input-text-sizeLayout 回退值var(--md-sys-typescale-title-medium-size)	Controls input text size.
--md-input-otp-input-text-weightTypography 回退值var(--md-sys-typescale-title-medium-weight)	Controls input text weight.
--md-input-otp-large-container-sizeLayout 回退值3.5rem	Controls large container size.
--md-input-otp-medium-container-sizeLayout 回退值3rem	Controls medium container size.
--md-input-otp-outline-colorColor 回退值var(--md-sys-color-outline)	Controls outline color.
--md-input-otp-outline-widthLayout 回退值0.0625rem	Controls outline width.
--md-input-otp-small-container-sizeLayout 回退值2.5rem	Controls small container size.