Password

A password input component with visibility toggle, supporting composable assembly

Installation

$npx litefy@latest add password

$pnpm dlx litefy@latest add password

$yarn dlx litefy@latest add password

$bun --bun litefy@latest add password

Usage

Basic Usage

A simple password input with toggle visibility.

import { Password } from "@/ui";

export default function PasswordBasicDemo() {
  return <Password placeholder="Enter password..." />;
}

Invalid State

Password input with error state styling.

import { Password } from "@/ui";

export default function PasswordInvalidDemo() {
  return (
    <Password
      placeholder="Enter password..."
      invalid
      defaultValue="incorrect"
    />
  );
}

Controlled Mode

Manage password value externally with controlled state.

Password length: 0

import { useState } from "react";
import { Password } from "@/ui";

export default function PasswordControlledDemo() {
  const [password, setPassword] = useState("");

  return (
    <div className="space-y-4">
      <Password
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Enter password..."
      />
      <p className="text-sm text-muted-foreground">
        Password length: {password.length}
      </p>
    </div>
  );
}

Custom

Assemble a password input with custom styling using the composable components.

"use client";import { useState } from "react";import { PasswordGroup, PasswordRoot, PasswordToggle } from "@/ui";export default function Demo() {  const [visible, setVisible] = useState(false);  return (    <PasswordGroup className="max-w-xs">      <PasswordRoot placeholder="Confirm password..." visible={visible} />      <PasswordToggle        visible={visible}        onClick={() => setVisible(!visible)}        className="text-primary"      />    </PasswordGroup>  );}

API Reference

High-level Components

Ready-to-use composite component.

Password

Prop	Type	Default	Description
`value`	`string`	-	Controlled password value
`visible`	`boolean`	-	Controlled visibility state
`defaultVisible`	`boolean`	`false`	Default visibility state (uncontrolled)
`onVisibleChange`	`(visible: boolean) => void`	-	Callback when the visibility state changes
`invalid`	`boolean`	`false`	Whether the input is in invalid state
`className`	`ClassNameValue`	-	Custom classes, applied to the group shell
`style`	`React.CSSProperties`	-	Inline styles, applied to the group shell
`classNames`	`{ root?; toggle? }` — each `ClassNameValue`	-	Custom classes for the inner input (`root`) and the toggle
`styles`	`{ root?; toggle? }` — each `React.CSSProperties`	-	Inline styles for the inner input (`root`) and the toggle
`disabled`	`boolean`	`false`	Disable the input and toggle
`...props`	`React.ComponentProps<"input">`	-	Supports all native input props (except `type`, `className`), such as `placeholder`, `name`, `required`

Composable Components

PasswordGroup

The wrapper that carries the border, focus-within ring and invalid styling.

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	Applies `data-invalid` and `aria-invalid`
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props

PasswordRoot

The native input that switches between password and text types.

Prop	Type	Default	Description
`visible`	`boolean`	`false`	When `true`, renders as `type="text"`, otherwise `type="password"`
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"input">`	-	Supports all native input props (except `type`, `className`)

PasswordToggle

The visibility toggle button with eye icons and aria-pressed state.

Prop	Type	Default	Description
`visible`	`boolean`	`false`	Drives `aria-pressed`, `aria-label` and the default icon
`className`	`ClassNameValue`	-	Custom CSS class
`children`	`React.ReactNode`	-	Custom icon content, replaces the default eye icons
`...props`	`React.ComponentProps<"button">`	-	Supports all native button props (except `className`)

Password

On this page