PasswordInput – Once UI

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"
/>

size="xxs" draws a 32px field, the height of a size="s" Button; the reveal toggle keeps its 24px.

Toolbar size

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

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

API reference

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

	Type	Default
…and every InputProps prop	inherited	—