PasswordInput

Updated: September 14, 2026

PasswordInput is Input with one addition: a control in the suffix that switches the field between masked and visible. Everything else — label, description, validation, size — behaves identically.

PasswordInput

const [password, setPassword] = useState<string>("");

<PasswordInput
  id="password"
  label="Password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  placeholder="Enter your password"
/>

API reference

It adds no props of its own. The full surface is Input's.

Prop	Type	Default
…and every InputProps prop	inherited	—

Form ControlsOTPInput

Form ControlsRadioButton

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club