AppPasswordInput

Átomos

Abrir no Storybook

Campo de senha com botão para mostrar ou ocultar o texto digitado. Aceita as mesmas props de campo do AppInput (rótulo, dica, erro, tamanho) e, opcionalmente, a lista de requisitos da senha com o estado de cada um.

Quando usar: login, cadastro e redefinição de senha.

Quando não usar: códigos curtos que a pessoa precisa conferir (ex.: código de validação por e-mail); use AppInput com inputMode="numeric".

O botão "Mostrar senha" indica o estado com aria-pressed e devolve o foco ao campo quando clicado com o mouse.

Importar

import { AppPasswordInput } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppPasswordInput.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppPasswordInput.css';

Exemplos

Default

Exemplo: AppPasswordInput, Default

const Default = () => <AppPasswordInput label="Senha" placeholder="Digite sua senha" />;

Com Regras

Exemplo: AppPasswordInput, Com Regras

const ComRegras = () => <NewPassword />;

Com Erro

Exemplo: AppPasswordInput, Com Erro

const ComErro = () => <AppPasswordInput
    label="Senha"
    placeholder="Digite sua senha"
    error="Senha incorreta. Tente de novo ou recupere sua senha." />;

Desabilitado

Exemplo: AppPasswordInput, Desabilitado

const Desabilitado = () => <AppPasswordInput label="Senha" placeholder="Digite sua senha" disabled />;

Props

Prop	Tipo	Padrão	Descrição
label*	string	—	Rótulo visível do campo (obrigatório): vira o nome acessível via <label htmlFor>.
error	string	—	Mensagem de erro: troca o hint, pinta o campo de vermelho e marca aria-invalid.
hint	string	—	Texto de apoio abaixo do campo. Some enquanto houver error.
leadingAddon	ReactNode	—	Segmento à esquerda: texto fixo ("http://", com divisor) ou <select> ("R$", sem divisor, com seta).
leadingIcon	ReactNode	—	Ícone de 20px antes do texto. Decorativo (aria-hidden).
rules	AppPasswordRule[]	—	Requisitos da senha, mostrados abaixo do campo e lidos junto com ele por leitores de tela.
size	"sm" | "md"	—	Altura do campo: sm ou md. Padrão: md.
startContent	ReactNode	—	Conteúdo livre antes do texto, na própria caixa: selos de pagamento, tags etc.