Ir al contenido
sebs7n-ui2.10.0
Formularios

PasswordInput

Un campo de contraseña con el ojo adentro para mostrarla, y una barra de seguridad de 4 niveles opcional.

Ver como .mdVer el código
import { PasswordInput } from "sebs7n-ui/password-input"

Ejemplos

Básico

El ojo va adentro del campo: muestra y oculta, con `aria-pressed`.

import { Field, FieldLabel } from "sebs7n-ui"
import { PasswordInput } from "sebs7n-ui/password-input"

function Basic() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Contraseña</FieldLabel>
      <PasswordInput autoComplete="current-password" name="password" />
    </Field>
  )
}

Con seguridad

`strength` suma la barra de 4 niveles con el nivel en texto: largo, mayúsculas y minúsculas, números y símbolos.

import { Field, FieldDescription, FieldLabel } from "sebs7n-ui"
import { PasswordInput } from "sebs7n-ui/password-input"

function WithStrength() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Contraseña nueva</FieldLabel>
      <PasswordInput autoComplete="new-password" name="new-password" strength />
      <FieldDescription>Al menos 8 caracteres. Para el acceso al portal de facturación.</FieldDescription>
    </Field>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

PasswordInput

PropTipoPor defectoDescripción
defaultValueField.Control.Props['defaultValue']—El valor inicial. Es la versión no controlada de value.
disabledboolean—Apaga la interacción y lo marca con data-disabled, que es el atributo del que cuelgan los estilos de apagado.
labelsPartial<Labels["passwordInput"]>—Textos: show, strength y los niveles weak, fair, good, strong.
onChangeChangeEventHandler<T, HTMLInputElement>—Se llama en cada tecla, como en Input. Con value, es lo que lo mantiene al día.
size"sm" | "md" | "lg""md"28, 36 (default) o 40, como Input.
strengthbooleanfalseUna barra de 4 niveles abajo del campo, con el nivel en texto.
valueReact.ComponentProps<'input'>['value']—El valor actual. Pasarlo lo vuelve controlado; para dejarlo libre, defaultValue.
classNamestring—Clases del contenedor (el campo y la barra).

Teclado

Tab
Entra al campo y después al ojo.
Enter · Espacio
En el ojo, muestra u oculta la contraseña.

Accesibilidad

  • El ojo es un botón de alternar: se llama «Mostrar contraseña» y aria-pressed dice si se está mostrando. El nombre no cambia al apretarlo.
  • La barra es un meter nombrado por «Seguridad», con el nivel en aria-valuetext («Buena») y en texto al lado; una región viva lo anuncia cuando cambia de nivel, no en cada tecla.
  • El color de la barra (rojo, ámbar, verde) acompaña: el nivel siempre está en texto.

Reglas de uso

  • strength para crear o cambiar una contraseña; para entrar, sin barra.
  • La barra es una guía por reglas (largo, mayúsculas y minúsculas, números, símbolos), no una política: lo que se acepta lo decide el servidor. passwordStrength exporta la misma cuenta.
  • Pasale autoComplete (current-password o new-password): es lo que usan los gestores de contraseñas.
  • Solo por subpath (sebs7n-ui/password-input): no está en el barrel, por peso.

Relacionados

InputInputGroupMeterField