Skip to content
Vy logo
Components

PasswordInput

The PasswordInput component is designed to securely collect password information from users. It features built-in security measures and user-friendly enhancements to ensure both safety and ease of use. This component is an essential part of any form where sensitive data is required.

Examples

A basic

<PasswordInput label="Password" />

With icon on the left

<PasswordInput label="Train password" startElement={<TrainOutline24Icon />} />

Controlled field with validation

() => {
  const [password, setPassword] = React.useState("");
  return (
      <PasswordInput 
        label="Password"
        value={password}
        invalid={password !== "Tut tut"}
        errorText="Wrong password!"
        onChange={e => setPassword(e.target.value)}
      />
  );
}

Different variants

<Stack gap={3}>
  <PasswordInput label="Core" />
  <PasswordInput label="Floating" variant="floating" />
</Stack>