mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
f9909827d0* feat(theme): add g80 theme * docs(data-table): use link with icon variant * feat(search): support expandable variant * fix(file-uploaded): use semantic p element instead of strong * feat(side-nav): dispatch open, close, click:overlay events * refactor(ui-shell): remove usage of deprecated Icon component * feat(ui-shell): allow custom hamburger menu icons * feat(button): support xl size * fix(code-snippet): wrap code element with pre * refactor(button): use button specific tooltip class for icon-only variant * feat(password-input): support warning, inline props * feat(data-table): support medium size
52 lines
1.5 KiB
Text
52 lines
1.5 KiB
Text
<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..." />
|