PinInput

import {PinInput} from '@gravity-ui/uikit';

PinInput 是一组用于快速输入数字或字母数字值序列的输入。它最常见的用例是输入通过短信 (SMS)、电子邮件或身份验证器应用程序收到的 OTP 或确认码。

每个输入一次收集一个字符。当一个值被接受时，焦点将移至下一个输入，直到所有字段都填充完毕。

§类型

默认情况下，输入仅接受数值。要允许使用字母数字值，请将该 type 属性设置为： "alphanumeric"

<PinInput type="alphanumeric" />

§大小

该组件有四种尺寸： s m 、 l 、和 xl。默认大小为 m。

<PinInput size="s" />
<PinInput size="m" />
<PinInput size="l" />
<PinInput size="xl" />

§州

如果你不希望用户与组件交互，请设置该 disabled 属性：

<PinInput disabled />

要显示组件的无效状态，请使用带有 "invalid" 值的 validationState 属性。或者，您可以使用以下 errorMessage 属性设置错误消息文本：

<PinInput validationState="invalid" errorMessage="Incorrect PIN" />

§占位符

默认情况下，输入没有占位符。你可以用这个 placeholder 属性来设置它：

<PinInput placeholder="😎" />

§面具

如果需要掩盖输入的值，请使用该 mask 属性。它与 <input type="password"/> 行为类似。

<PinInput mask />

§OTP

如果你想让浏览器推荐来自外部环境（例如 SMS）的一次性代码，请设置该 otp 属性。

§API

• focus(): void:将焦点设置为当前活动输入。

§CSS API

§属性