# PasswordInput

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

```tsx
import { PasswordInput } from "sebs7n-ui/password-input"
```

## Ejemplos

### Básico

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

```tsx
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.

```tsx
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

### PasswordInput

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `defaultValue` | `Field.Control.Props['defaultValue']` | — | El valor inicial. Es la versión no controlada de `value`. |
| `disabled` | `boolean` | — | Apaga la interacción y lo marca con `data-disabled`, que es el atributo del que cuelgan los estilos de apagado. |
| `labels` | `Partial<Labels["passwordInput"]>` | — | Textos: `show`, `strength` y los niveles `weak`, `fair`, `good`, `strong`. |
| `onChange` | `ChangeEventHandler<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`. |
| `strength` | `boolean` | `false` | Una barra de 4 niveles abajo del campo, con el nivel en texto. |
| `value` | `React.ComponentProps<'input'>['value']` | — | El valor actual. Pasarlo lo vuelve controlado; para dejarlo libre, `defaultValue`. |
| `className` | `string` | — | Clases del contenedor (el campo y la barra). |

## Teclado

| Tecla | Qué hace |
|---|---|
| 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

[input](/docs/components/input.md) · [input-group](/docs/components/input-group.md) · [meter](/docs/components/meter.md) · [field](/docs/components/field.md)