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

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

Controlled field with validation

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

Different variants

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