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

### Default

<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

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

### Light variant

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

### Inline

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

### Extra-large size

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

### Small size

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

### Invalid state

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

### Warning state

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

### Disabled state

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