Hewn
Components

Components

PasswordField

Password input with an accessible show and hide toggle.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add password-field

Built on React Aria TextField with a Group and reveal button. Defaults to masked input; the toggle swaps to plain text without leaving the field chrome.

Use at least 12 characters.
Passwords do not match.

Usage

TSX
import { PasswordField } from "@hewnui/ui";

<PasswordField label="Password" placeholder="Enter passphrase" />

Variants

outline (default), filled, flushed, and glass.

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled
  • defaultVisible starts revealed

Accessibility

  • Toggle button has show/hide accessible names
  • Hit target is at least 40×40px
  • Label and error association from React Aria

API reference

Props for PasswordField from @hewnui/ui/password-field. Generated from component types — not hand-written.

Prop

Type

InputGroup

Text field with prefix and suffix affixes inside shared input chrome.

InputOTP

Segmented one-time code entry with paste and keyboard navigation.

On this page

UsageVariantsStatesAccessibility