Skip to the content
BooleanPress UI

Form

Password input

A secret field, such as an API key or an SMTP password, with a button that shows or hides the value.

Import

import { PasswordInput } from "@booleanpress/ui/password-input"

Usage

PasswordInput is an InputGroup with a show/hide button. It is the products' own composition, not a stock component. Name it with a Label whose htmlFor is its id.

import { Label } from "@booleanpress/ui/label"
import { PasswordInput } from "@booleanpress/ui/password-input"

export function ApiKey() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="api-key">API key</Label>
      <PasswordInput id="api-key" />
    </div>
  )
}

It takes the attributes of a native input except type, and className goes on the group. It starts hidden and keeps its own show/hide state. It is for a provider secret, not a sign-in: it sets autocomplete="new-password" and the 1Password and LastPass ignore attributes, so a password manager does not fill in the site's saved login. Pass your own autoComplete to override that. The button's name comes from the provider string showPassword; aria-pressed says whether the value is shown.

Examples

Basic

A hidden value; the button shows it.

Invalid

aria-invalid draws the error border around the group; aria-describedby reads the message.

Disabled

Neither the input nor the show/hide button can be used.

Accessibility

Semantics
A native input (type="password", or text while shown) and a native toggle button: one name, "Show password", and aria-pressed that is true while the value is shown.
Labels
Name the input with a Label htmlFor or aria-label. The button is named by the provider string showPassword; translate it with BooleanUIProvider.
Focus
The button is in the tab order after the input, so a keyboard user can reveal the value. The focus ring is drawn on the group when the input has keyboard focus.
Known limits
  • A password input has no textbox role, so find it by its label, not by role.

Keyboard

Keyboard
KeyBehaviour
EnterSpaceOn the show/hide button: switches between showing and hiding the value.

API

PasswordInput

Renders a input and passes it every other prop.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: .

Provider strings: showPassword (BooleanUIProvider's strings).

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
TokenUsed for