'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
OTPField
Códigos de un solo uso en casillas separadas; pega el código completo de una vez.
import { OTPField } from '@alea/ui';
Ejemplos
OTPField
Escribe, pega o deja que el teléfono lo llene.
Oculto y con error
Un PIN oculta sus caracteres; los errores dicen qué hacer.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Mask
mask - Type
type
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-bg…--alea-border-strong…--alea-field-bg…--alea-focus…--alea-focus-halo…--alea-status-danger…--alea-text…
Radius
--alea-radius-sm…
Type
--alea-font-family-mono…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
OTPField props
Códigos de un solo uso en casillas separadas: pega el código completo, las flechas y Retroceso se mueven entre casillas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
defaultValue | string | '' | El código al inicio. |
errorMessage | ReactNode | - | El error mostrado cuando es inválido. |
isDisabled | boolean | - | Deshabilita todas sus partes. |
isInvalid | boolean | - | Lo marca como inválido y muestra errorMessage. |
label | ReactNode | - | La etiqueta visible ("Código de verificación"). |
length | number | 6 | Cantidad de caracteres. Por defecto 6. |
mask | boolean | - | Oculta los caracteres (PIN). |
name | string | - | Nombre del campo del formulario para el valor unido. |
onChange | ((value: string) => void) | - | Se llama con el código mientras se escribe. |
onComplete | ((value: string) => void) | - | Se llama cuando todas las casillas están llenas. |
type | "numeric" | "alphanumeric" | 'numeric' | numeric (por defecto) o alphanumeric. |
value | string | - | El código (controlado). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
typenumericalphanumeric- Estados
- Focus (CSS)InvalidDisabled
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-otp.alea-otp-boxes.alea-otp-box.alea-field-error
Accesibilidad
- Un grupo con etiqueta; cada casilla dice qué carácter es.
- La primera casilla tiene autocomplete="one-time-code", así los teléfonos ofrecen el código del SMS.
Teclado
| Tecla | Acción |
|---|---|
| Escribir | Llena y avanza |
| Retroceso | Borra y retrocede |
| Flecha izquierda / Derecha | Se mueven entre casillas |
| Pegar | Llena todas las casillas |
Qué hacer y qué evitar
Hacer
- Di a dónde se envió el código.
Evitar
- No caduques sin avisar.