PasswordInput

Source code
Table of Contents

Usage

Default

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

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

Password is visible

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

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

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

Hidden label

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

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

Light variant

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

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

Extra-large size

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

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

Small size

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

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

Invalid state

Incorrect user name or password.
<script>
  import { PasswordInput } from "carbon-components-svelte";
</script>

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

Disabled state

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

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