Password Input

A specialized input field for entering and managing passwords, with visibility toggle functionality.

Label

Anatomy

Usage

<script>
  import {PasswordInput} from 'ui-ingredients';
  import {EyeOffIcon, EyeIcon} from '$lib/icons';
</script>

<PasswordInput.Root>
  {#snippet children(api)}
    <PasswordInput.Label>Label</PasswordInput.Label>
    <PasswordInput.Control>
      <PasswordInput.Input />
      <PasswordInput.VisibilityTrigger>
        <PasswordInput.Indicator>
          {#if api.visible}
            <EyeIcon />
          {:else}
            <EyeOffIcon />
          {/if}
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  {/snippet}
</PasswordInput.Root>

Usage with Field component

<script>
  import {PasswordInput, Field} from 'ui-ingredients';
  import {EyeOffIcon, EyeIcon} from '$lib/icons';
</script>

<Field.Root>
  <PasswordInput.Root>
    {#snippet children(api)}
      <PasswordInput.Label>
        {#snippet asChild(attrs)}
          <Label {...attrs}>Label</Label>
        {/snippet}
      </PasswordInput.Label>
      <PasswordInput.Control class="flex">
        <PasswordInput.Input class="rounded-r-none border-r-0 outline-none">
          {#snippet asChild(attrs)}
            <Input {...attrs} />
          {/snippet}
        </PasswordInput.Input>
        <PasswordInput.VisibilityTrigger class="rounded-l-none outline-none">
          {#snippet asChild(attrs)}
            <Button {...attrs} variant="outline">
              <PasswordInput.Indicator>
                {#if api.visible}
                  <EyeIcon />
                {:else}
                  <EyeOffIcon />
                {/if}
              </PasswordInput.Indicator>
            </Button>
          {/snippet}
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    {/snippet}
  </PasswordInput.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`autoComplete`	`"current-password"`	`"current-password" \| "new-password"` The autocomplete attribute for the password input.
`defaultVisible`		`boolean` The default visibility of the password input.
`disabled`		`boolean` Whether the password input is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; control?: string; input?: string; visibilityTrigger?: string; indicator?: string; }` The ids of the elements in the password input. Useful for composition.
`ignorePasswordManagers`		`boolean` When `true`, the input will ignore password managers. Only works for the following password managers - 1Password, LastPass, Bitwarden, Dashlane, Proton Pass
`invalid`		`boolean` The invalid state of the password input.
`name`		`string` The name of the password input.
`onVisibilityChange`		`(details: VisibilityChangeDetails) => void` Function called when the visibility changes.
`readOnly`		`boolean` Whether the password input is read only.
`required`		`boolean` Whether the password input is required.
`translations`		`Partial<{ visibilityTrigger: (visible: boolean) => string; }>` The localized messages to use.
`visible`		`boolean` Whether the password input is visible.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"root"
`data-scope`	"password-input"

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"control"
`data-scope`	"password-input"

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"indicator"
`data-scope`	"password-input"
`data-state`	"open" \| "closed"

Input

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"input"
`data-scope`	"password-input"
`data-state`	"open" \| "closed"

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"label"
`data-scope`	"password-input"

VisibilityTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	"visibility-trigger"
`data-scope`	"password-input"
`data-state`	"open" \| "closed"