Komponents
Components

Components

PasswordField

Password input with an accessible show and hide toggle.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

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

Snippet
import { PasswordField } from "@komponents/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

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