Password input

Pro

A password field with a button that shows or hides what was typed. The button says what pressing it will do ("Show", "Hide"), so its words change rather than a pressed state. It starts hidden, and hides again when its form is submitted, so the browser doesn't save what was typed as ordinary text. While Caps Lock is on, a note under the field says so, and the field is described by it.

Pass autoComplete: "current-password" to sign in, "new-password" to set one, so password managers fill it or offer one. Use Field for the label, hint and error.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1 and 2.6.2: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/password-input

Brings in: button, input, locale, tokens, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Field } from "@/components/candor/ui/field"
import { PasswordInput } from "@/components/candor/ui/password-input"

// The button says what it will do. autoComplete tells a password manager whether to fill one or offer a new one.
export default function Example() {
  return (
    <Field label="API secret" hint="Stored encrypted. You can replace it, but not read it back." className="w-full max-w-sm">
      <PasswordInput name="secret" autoComplete="new-password" />
    </Field>
  )
}

<PasswordInput>

Prop	Type	Default	Description
attend	`boolean \| undefined`	—	Rings the field once, as `Input`'s `attend` does, after a failed submit.
"aria-describedby"	`string \| undefined`	—	Ids of anything else that describes the field; the Caps Lock note's id is added while it shows.

Also takes the props of Omit<React.ComponentProps<"input">, "type">.

Strings

The fixed words, in English by default. Change any of them under passwordInput in <LocaleProvider strings={{ … }}>; the table is exported as passwordInputStrings.

Key	English
show	Show
hide	Hide
showPassword	Show password
hidePassword	Hide password
capsLock	Caps Lock is on.