PasswordInput

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>

• Secure Entry: Masks user input to protect sensitive information from onlookers.
• Visibility Toggle: Allows users to toggle password visibility for convenience during entry.
• Validation Feedback: Provides real-time feedback on password strength and validation requirements.
• Accessibility: Fully accessible to users with disabilities, ensuring compliance with accessibility standards.

The PasswordInput component should be used in any scenario where a user is required to input a password. It is ideal for login forms, account creation, password updates, and other security-sensitive fields.

By incorporating the PasswordInput component into your application, you can ensure a secure and user-friendly experience for your users.