InputPassword

Usage

import { InputPassword } from '@acronis-platform/ui-react';

InputPassword wraps a native <input> and adds the same field furniture as InputText — an optional label (with a required marker), helper description, and error message — plus a built-in show/hide toggle button inside the box. Visibility is internal state: the input starts masked (type="password") and the toggle flips it to type="text". Themed by the --ui-input-password-* tokens. className targets the field as a whole (label, box, and message together), so it sizes correctly in a flex/grid ancestor.

Examples

A labeled field with helper text:

<InputPassword label="Password" description="Must be at least 8 characters." />

Required and error states:

<InputPassword label="Password" required placeholder="Password" />

<InputPassword
  label="Password"
  error="Enter at least 8 characters"
  placeholder="Password"
/>

The description is hidden while error is set, and the error message drives aria-invalid plus the red box border and toggle tone.

Localizing the visibility toggle — the toggle button's accessible name tracks its state, and both strings are props:

<InputPassword
  label="Contraseña"
  showPasswordLabel="Mostrar contraseña"
  hidePasswordLabel="Ocultar contraseña"
/>

A controlled field:

const [value, setValue] = React.useState('');

<InputPassword
  label="New password"
  required
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Disabled — the input and the toggle button are both inert:

<InputPassword label="Password" defaultValue="hunter2" disabled />

API Reference