<script>
  import { PasswordInput } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`PasswordInput` provides a secure text input field with a visibility toggle for password entry. It includes features for validation, warnings, and accessibility.

## Default

Create a basic password input with a label and placeholder.

<PasswordInput labelText="Password" placeholder="Enter password..." />

## Custom tooltip alignment

Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.

<PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />

## Password is visible

Set prop `type` to `"text"` to toggle password visibility.

<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />

## Hidden label

Visually hide the label while maintaining accessibility.

<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />

## Light variant

Enable the light variant for use on dark backgrounds.

<PasswordInput light labelText="Password" placeholder="Enter password..." />

## Inline

Display the input with an inline label layout.

<PasswordInput inline labelText="Password" placeholder="Enter password..." />

## Extra-large size

Use the extra-large size variant for increased visibility.

<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />

## Small size

Use the small size variant for compact layouts.

<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />

## Invalid state

Display an error message when the input is invalid.

<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />

## Warning state

Show a warning message for non-critical issues.

<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />

## Disabled state

Disable the input to prevent user interaction.

<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

## With helper text

Add helper text to provide additional context or instructions.

<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />
