PinInput

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

PinInput es un grupo de entradas para introducir rápidamente una secuencia de valores numéricos o alfanuméricos. Su caso de uso más común es introducir códigos OTP o de confirmación recibidos a través de mensajes de texto (SMS), correos electrónicos o aplicaciones de autenticación.

Cada entrada recopila un carácter a la vez. Cuando se acepta un valor, el foco se mueve a la siguiente entrada, hasta que se rellenen todos los campos.

§Tipo

De forma predeterminada, las entradas solo aceptan valores numéricos. Para permitir valores alfanuméricos, defina la type propiedad en "alphanumeric":

<PinInput type="alphanumeric" />

§Tamaño

Este componente viene en cuatro tamaños: s m, l, y xl. El tamaño predeterminado es m.

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

§Estado

Si no desea que el usuario interactúe con el componente, defina la disabled propiedad:

<PinInput disabled />

Para mostrar un estado no válido del componente, utilice la validationState propiedad con el "invalid" valor. Si lo desea, puede establecer el texto de un mensaje de error con la errorMessage propiedad:

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

§Marcador de posición

De forma predeterminada, no hay ningún marcador de posición para las entradas. Puede configurarlo con la placeholder propiedad:

<PinInput placeholder="😎" />

§máscara

Si necesita enmascarar los valores introducidos, utilice la mask propiedad. Es similar al <input type="password"/> comportamiento.

<PinInput mask />

§ARRIBA

Si desea que el navegador sugiera códigos de un solo uso desde el contexto externo (por ejemplo, SMS), defina la otp propiedad.

§API

• focus(): void: Establece el foco en la entrada activa actual.

§API CSS

§Propiedades