mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(password-input): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:32:11 -07:00
commit d105afc7fa
1 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/src/pages/components/PasswordInput.svx
View file

@ -3,8 +3,12 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`PasswordInput` provides a secure text input field with a visibility toggle for password entry. It includes features for validation, warnings, and accessibility.
## Default ## Default
Create a basic password input with a label and placeholder.
<PasswordInput labelText="Password" placeholder="Enter password..." /> <PasswordInput labelText="Password" placeholder="Enter password..." />
## Custom tooltip alignment ## Custom tooltip alignment
@ -21,36 +25,54 @@ Set prop `type` to `"text"` to toggle password visibility.
## Hidden label ## Hidden label
Visually hide the label while maintaining accessibility.
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." /> <PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
## Light variant ## Light variant
Enable the light variant for use on dark backgrounds.
<PasswordInput light labelText="Password" placeholder="Enter password..." /> <PasswordInput light labelText="Password" placeholder="Enter password..." />
## Inline ## Inline
Display the input with an inline label layout.
<PasswordInput inline labelText="Password" placeholder="Enter password..." /> <PasswordInput inline labelText="Password" placeholder="Enter password..." />
## Extra-large size ## Extra-large size
Use the extra-large size variant for increased visibility.
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
## Small size ## Small size
Use the small size variant for compact layouts.
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." /> <PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
## Invalid state ## Invalid state
Display an error message when the input is invalid.
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." /> <PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
## Warning state ## Warning state
Show a warning message for non-critical issues.
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." /> <PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
## Disabled state ## Disabled state
Disable the input to prevent user interaction.
<PasswordInput disabled labelText="Password" placeholder="Enter password..." /> <PasswordInput disabled labelText="Password" placeholder="Enter password..." />
## With helper text ## 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..." /> <PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />