# PasswordInput

Campo de senha com o olho que revela.

Existe como peça porque todo projeto reconstrói este par, e reconstrói com o
mesmo defeito: o botão dizendo o estado em vez da ação. "Senha visível" não diz
o que acontece ao clicar, e quem navega por leitor de tela decide pelo verbo.
Aqui o nome do botão é sempre a ação: "Mostrar senha", "Esconder senha".

Revelar é um gesto momentâneo: sair do campo esconde de novo. Deixar a senha na
tela depois que a pessoa foi para outro lugar é o que faz alguém ser lido por
cima do ombro numa mesa compartilhada.

## Vestir por parte

O `className` veste o **campo**, e não a moldura. É a única peça do catálogo em
que a raiz não é o alvo dele, e mudar isso agora trocaria em silêncio a largura
de toda tela de login que já existe. Então a moldura ganhou nome próprio:

```tsx
<PasswordInput
  aria-label="Senha"
  classNames={{ wrapper: 'w-72', input: 'font-mono', action: 'text-fg-muted' }}
/>
```

Os dois nomes que o leitor de tela ouve no botão entram por `labels`, e cada um
tem o próprio padrão. Trocar só um não apaga o outro:

```tsx
<PasswordInput aria-label="Senha" labels={{ show: 'Revelar a senha' }} />
```

## Quando não usar

Para código de verificação de seis dígitos, use `OTPField`. Ele separa as
casas, aceita colar o código inteiro e não esconde nada, porque o código é para
ser lido em voz alta do celular.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `PasswordInput` - o botão troca de nome com o estado (`labels.show`/`labels.hide`), e sair do campo esconde de novo. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { PasswordInput } from '@rivocode/ui'
```

## Exemplos

### Entrar

```tsx
import { Field, FieldLabel, PasswordInput } from '@rivocode/ui'

export function SignIn() {
  return (
    <div className="w-72">
      <Field>
        <FieldLabel>Senha</FieldLabel>
        <PasswordInput placeholder="Sua senha" autoComplete="current-password" />
      </Field>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"action" \| "input" \| "wrapper", string>>` |  | - | Classe por parte: `wrapper`, `input`, `action`. |
| `defaultValue` | `string \| number \| readonly string[]` |  | 0.5.0 |  |
| `labels` | `{ show?: string \| undefined; hide?: string \| undefined; }` |  | 0.5.0 | O que o leitor de tela ouve no botao, antes e depois de revelar. |
| `onValueChange` | `((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)` |  | 0.5.0 | Callback fired when the `value` changes. |
| `render` | `ComponentRenderFn<HTMLProps, FieldControlState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.5.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `size` | `"lg" \| "md" \| "sm"` |  | 0.5.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)