Todos los componentes (204)
Contraseña
Campos · PasswordField
Qué es y cuándo usarlo
La contraseña, con el ojo para verla. El nombre del botón dice el estado, no solo la acción: «Mostrar la contraseña» cuando está tapada y «Ocultar la contraseña» cuando está a la vista, porque quien no ve la pantalla necesita saber si la está escribiendo destapada.
Cuándo usarlo
- Para entrar, tal cual: lleva
autocomplete="current-password"y el gestor de contraseñas rellena la guardada. - Para crearla o cambiarla, con
newPassword(autocomplete="new-password", y el gestor ofrece generar una) yshowStrength: una barra de cuatro tramos y el nivel escrito, con un consejo («Seguridad: Débil. Con 12 caracteres o más sube bastante»). viewLabelyhideLabelcambian los dos nombres del ojo.
Cuándo no
- Un código de un solo uso (el del SMS o el del correo):
CodeField. - Un código de descuento:
CouponField.
Teclado: Tab llega al campo y después al ojo; Intro o Espacio en el ojo destapan o tapan la contraseña.
Accesibilidad: la etiqueta es obligatoria; la ayuda y el error se leen como descripción. El nivel de seguridad se ve con cada tecla, pero se anuncia cuando se deja de escribir (a los 700 ms), no con cada pulsación. El medidor es una ayuda a ojo (longitud y variedad): quien decide si una contraseña vale es el servidor.
Aspecto fino: sin variables propias: usa las del campo (--amset-field-*) y se ajusta con las clases amset-password__strength, amset-password__bars, amset-password__segment y amset-password__level.
Cómo se ve
<PasswordField label="Contrasena nueva" newPassword showStrength hint="Minimo 12 caracteres" />
<PasswordField label="Contrasena" error="La contrasena no es correcta. Te quedan 2 intentos." />Props
Se importa con import { PasswordField } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
labelobligatoria | string | — |
className | string | — |
defaultValue | string | — |
disabled | boolean | — |
error | string | — |
front | ReactNode | Contenido delante del texto: un icono, igual que en el campo de texto. DETRAS no se puede, y no es un olvido: ahi va el ojo, que es parte del componente. |
hideLabel | string | — |
hint | string | — |
inputRef | Ref<HTMLInputElement> | El `<input>` de la contraseña de verdad, para enfocarlo, seleccionar su texto o medirlo desde fuera. Va aparte del `ref` porque el componente pinta una caja con etiqueta, ayuda y error, y quien pide un ref casi siempre quiere el control. |
invalid | boolean | — |
newPassword | boolean | Contraseña nueva (alta o cambio): cambia el `autocomplete` para que el gestor de contraseñas ofrezca generar una en vez de rellenar la de siempre. |
onChange | (value: string) => void | — |
onChangeEvent | (event: ChangeEvent<HTMLInputElement>) => void | Como `onChange`, pero con el evento nativo del `<input>`: `e.target.value`, `e.currentTarget`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres el texto, `onChange` lo entrega ya. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
showStrength | boolean | Barra de fuerza mientras se escribe. Para altas y cambios de contraseña. |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion. |
value | string | — |
variant | FieldVariant | — |
viewLabel | string | — |
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: