Docs draft
PasswordInput
Component storyFigma component set ↗React component ↗DSDS entity ↗
States
empty — No value entered yet.
focus — Holds keyboard focus and shows the focus ring.
focus revealed — Focused while the value is shown in plain text.
filled — Holds an entered value.
error — Signals a failed or invalid value.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
Guidelines
mustThe reveal control is the text Show/Hide, styled type.label in text.secondary. — The old .Form Control was text, not an eye icon; it stays text.
mustStrength feedback is the Meter below the field, inside FormField. — The old Password Meter Input baked it in; composition keeps the input reusable.
API
| Prop | Type | Description |
|---|---|---|
label | string | Floating label text for the field. |
forgotHref | string | Renders the small Forgot password? Link under the field (the old Action=Yes). |
...rest | InputHTMLAttributes minus type/placeholder | All other native input props, forwarded to the underlying input; type and placeholder are owned by the component. |
Design specifications
| anatomy | Input's underline anatomy; masked value in color.text.entry |
| toggle | type.label in color.text.secondary, hover color.text.primary |
| forgot-link | onigiri.link, small |
Accessibility
Tab — Field, then Show/Hide (aria-pressed), then the forgot link when present.
Reveal state announced via aria-pressed on the toggle.