mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
78 lines
2.4 KiB
Text
78 lines
2.4 KiB
Text
<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..." />
|