Todos los componentes (204)

Código de un solo uso

Campos · CodeField

Qué es y cuándo usarlo

El código de un solo uso: el de la verificación en dos pasos, el que llega por SMS o por correo. Una casilla por carácter, porque así se lee y se dicta mejor, pero por dentro es un solo valor.

Cuándo usarlo

Verificar un teléfono o un correo, entrar con doble factor, confirmar una operación.
long (6 por defecto) y kind: numeric o alphanumeric, que pasa las letras a mayúsculas.
onComplete salta en cuanto el código está entero, sin pulsar nada más: ahí va la comprobación.

Cuándo no

Una contraseña: PasswordField.
Un código de descuento: CouponField, que además lo comprueba con el servidor.
Un código largo o sin largo fijo (un localizador, un número de pedido): TextField.

Teclado: al escribir, el foco pasa solo a la casilla siguiente. Retroceso borra la casilla; si ya está vacía, borra la anterior y se va a ella. Flechas izquierda y derecha para moverse, Inicio y Fin para ir a la primera y a la última. Cada casilla es una parada del Tab. Pegar en cualquier casilla reparte el código entero y quita lo que sobra: «A1-B2 C3» entra como «A1B2C3».

Accesibilidad: las casillas son un grupo que se llama como la etiqueta, y cada una se llama «Dígito 1 de 6» (se cambia con checkboxText). La ayuda y el error describen el grupo, y con error cada casilla lleva aria-invalid. La primera casilla lleva autocomplete="one-time-code" para que el móvil ofrezca el código del SMS, y con numeric sale el teclado de números.

Aspecto fino: variables CSS --amset-code-width, --amset-code-width-max, --amset-code-height, --amset-code-font y --amset-code-slot. Las casillas se REPARTEN el ancho de su caja: crecen hasta --amset-code-width-max para llenarla —así en un formulario quedan alineadas con el botón de debajo— y encogen hasta 1,5 rem antes de salirse. Cuando topan con el máximo, el grupo queda centrado. Las rellenas se marcan.

Cómo se ve

Te lo hemos mandado por SMS al 612 34 56 78

Escribe o pega las seis cifras.

<CodeField
  label="Codigo de verificacion"
  long={6}
  kind="numeric"
  hint="Te lo hemos mandado por SMS al 612 34 56 78"
  onComplete={comprobar}
/>

Props

Se importa con import { CodeField } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que codigo es. Obligatorio: nombra el grupo de casillas.
`autoFocus`	`boolean`	—
`checkboxText`	`(position: number, long: number) => string`	Como se llama cada casilla para el lector de pantalla.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`error`	`string`	—
`hint`	`string`	—
`initialValue`	`string`	—
`kind`	`CodeKind`	—
`long`	`number`	—
`onChange`	`(code: string) => void`	—
`onComplete`	`(code: string) => void`	Se llama cuando se completa el codigo, sin tener que pulsar nada mas.
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string`	—
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: