Password Input

1
2
3import type { ReactNode } from 'react';

import {

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/password-input.json

Usage#

import { PasswordInput, PasswordInputInput, PasswordInputToggle } from '@/components/data-entry/password-input';

<PasswordInput>
  <PasswordInputInput id="password" autoComplete="current-password" />
  <InputGroupAddon align="inline-end">
    <PasswordInputToggle aria-label="Show password" />
  </InputGroupAddon>
</PasswordInput>

The consumer composes the toggle inside an InputGroupAddon, beside any other addon such as a leading lock icon, and names it with a fixed aria-label such as Show password. Use it for any password field that needs a visibility toggle.

Composition#

PasswordInput
|-- PasswordInputInput
`-- InputGroupAddon
    `-- PasswordInputToggle

API reference#

PasswordInput#

Renders shadcn's InputGroup and takes every prop it takes. The root holds whether the password shows and carries data-visible while it does; className places the group. It sets data-slot="password-input", and its focus ring reads PasswordInputInput's own slot in place of upstream's input-group-control.

PasswordInputInput#

Renders shadcn's InputGroupInput and takes every prop it takes except type. Typed password or text as the root says. It sets data-slot="password-input-input" in place of upstream's input-group-control, which the root's focus ring reads (the invalid ring reads any data-slot, so it still applies unchanged).

PasswordInputToggle#

Renders shadcn's InputGroupButton and takes every prop it takes except children. The show/hide toggle, a ghost icon-xs button, pressed (aria-pressed) while the password shows; the caller names it with a fixed aria-label. It stays out of the tab order, so Tab moves from the password to the next field, and its eye plays on hover or focus. It sets data-slot="password-input-toggle".