Forms

Password Input

Input variant for password entry with an eye toggle to reveal characters.

Preview

import { PasswordInput } from '@brika/clay/components/password-input';

/** Password field with lock icon and eye toggle to reveal characters. */
export default function PasswordInputDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <PasswordInput placeholder="Enter your password" />
    </div>
  );
}

01 Installation

Install

Pull Password Input from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { PasswordInput } from "@brika/clay";

tsxGranular1 line

import { PasswordInput } from "@brika/clay/components/password-input";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxPassword Input.tsx10 lines

import { PasswordInput } from '@brika/clay/components/password-input';

/** Password field with lock icon and eye toggle to reveal characters. */
export default function PasswordInputDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <PasswordInput placeholder="Enter your password" />
    </div>
  );
}

03 Examples

Password Input, every way

Disabled

Disabled password input, preserves layout, all interactions blocked.

GitHub

import { PasswordInput } from '@brika/clay/components/password-input';

/** Disabled password input, preserves layout, all interactions blocked. */
export default function PasswordInputDisabledDemo() {
  return (
    <div className="w-full max-w-xs">
      <PasswordInput disabled defaultValue="disabled-value" />
    </div>
  );
}

Form

Full sign-in form context, password input paired with an email input and submit button.

GitHub

import { Label } from '@brika/clay/components/label';
import { PasswordInput } from '@brika/clay/components/password-input';

/** Full sign-in form context, password input paired with an email input and submit button. */
export default function PasswordInputFormDemo() {
  return (
    <form className="w-full max-w-xs space-y-4" onSubmit={(e) => e.preventDefault()}>
      <div className="space-y-1.5">
        <Label htmlFor="pw-email">Email</Label>
        <input
          id="pw-email"
          type="email"
          placeholder="you@example.com"
          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="pw-form">Password</Label>
        <PasswordInput id="pw-form" placeholder="Enter your password" />
      </div>
    </form>
  );
}

Invalid

Invalid state surfaced via aria-invalid, shows destructive ring and border.

GitHub

import { Label } from '@brika/clay/components/label';
import { PasswordInput } from '@brika/clay/components/password-input';

/** Invalid state surfaced via aria-invalid, shows destructive ring and border. */
export default function PasswordInputInvalidDemo() {
  return (
    <div className="w-full max-w-xs space-y-1.5">
      <Label htmlFor="pw-invalid">Password</Label>
      <PasswordInput
        id="pw-invalid"
        aria-invalid="true"
        defaultValue="short"
        placeholder="Enter password"
      />
      <p className="text-destructive text-xs">Password must be at least 8 characters.</p>
    </div>
  );
}

04 Accessibility

Accessibility

The reveal toggle carries aria-label that updates between "Show password" and "Hide password".
The underlying input switches between type="password" and type="text", AT announces the mode change.
aria-invalid="true" triggers the destructive ring; pair with a visible error message.
Autocomplete attributes like autocomplete="current-password" improve password-manager integration.

05 API reference

API reference

Props specific to Password Input. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

hideLabeldefault 'Hide password'
string
aria-label for the hide-password toggle.
showLabeldefault 'Show password'
string
aria-label for the show-password toggle.