Password input

PasswordInput is a password field in the input group's ink frame, with a Show button that reveals what's typed and hides it again. The button keeps the name "Show password" and reports its state with aria-pressed; autoComplete defaults to current-password, so saved passwords fill. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { PasswordInput } from "@/components/dithercharts/password-input"

<PasswordInput label="Password" name="password" />
<PasswordInput label="New password" name="new-password" autoComplete="new-password" hint="At least 12 characters." />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add password-input

Props

It renders a native element, so every other attribute that element takes passes through.