PasswordInput
TextInput with a built-in show/hide toggle. Carbon spec.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { PasswordInput } from "@avala/design"; <PasswordInput>PasswordInput</PasswordInput>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-passwordinput--defaultOpen in Storybook →
When to use
- Any password / passphrase / secret-token field.
- The toggle is on by default — users who need it can reveal their typing.
When not to use
- Non-secret single-line input → use `TextInput`.
- API-key fields where revealing is destructive (e.g. masked-after-creation) — use `TextInput` and a separate copy affordance.