componentes / formulário
Password Input
Campo de senha com botão de mostrar/ocultar.
1.7 kB gzip client component
Use the eye to check what you typed.
password-input-default.tsx
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { PasswordInput } from "@/components/ui/password-input";
export default function PasswordInputDefault() {
return (
<Field className="w-full max-w-sm" name="password">
<FieldLabel>Password</FieldLabel>
<PasswordInput autoComplete="new-password" placeholder="At least 8 characters" />
<FieldDescription>Use the eye to check what you typed.</FieldDescription>
</Field>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/password-input.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { PasswordInput } from "@/components/ui/password-input"
<PasswordInput autoComplete="current-password" />API
PasswordInput
Base UI · InputInput com um botão de olho que alterna entre esconder e mostrar o texto. Dentro de um Field, mantém label e erro.
| prop | tipo | padrão |
|---|---|---|
showLabelNome acessível do botão enquanto o texto está escondido. | string | "Show password" |
hideLabelNome acessível do botão enquanto o texto está visível. | string | "Hide password" |
...propsTudo do | Input props | - |
Acessibilidade
- O botão é um
<button>de verdade comaria-pressede um rótulo que nomeia a próxima ação. TraduzashowLabelehideLabelem outros idiomas.