Password Input

Secure password field with toggle visibility button.

Default

Base

Class	Description
`.ui-password-input`	Base class

Size

Class	Value
`.ui-password-input--sm`	sm
`.ui-password-input--lg`	lg

State

Class	Value
`.ui-password-input--error`	error
`.ui-password-input--success`	success

Block

Class	Description
`.ui-password-input--block`	block

Disabled

Class	Description
`.ui-password-input--disabled`	disabled

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-password-input-height`	`var(--ui-row-2)`	Overall height
`--ui-password-input-padding-x`	`var(--ui-space-1)`	Horizontal padding
`--ui-password-input-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-password-input-radius`	`var(--ui-radius-md)`	Corner radius
`--ui-password-input-bg`	`var(--ui-color-bg)`	Background color
`--ui-password-input-border-color`	`var(--ui-color-border-strong)`	Border color
`--ui-password-input-border-color-focus`	`var(--ui-color-primary)`	Border color focus
`--ui-password-input-text`	`var(--ui-color-text)`	Text
`--ui-password-input-placeholder`	`var(--ui-color-text-muted)`	Placeholder
`--ui-password-input-toggle-color`	`var(--ui-color-text-muted)`	Toggle color
`--ui-password-input-toggle-hover-bg`	`var(--ui-color-bg-muted)`	Toggle hover bg
`--ui-password-input-height-sm`	`calc(var(--ui-row) * 1.5)`	Overall height at small size
`--ui-password-input-font-size-sm`	`var(--ui-font-size-xs)`	Font size at small size
`--ui-password-input-height-lg`	`calc(var(--ui-row) * 2.5)`	Overall height at large size
`--ui-password-input-padding-x-lg`	`var(--ui-space-2)`	Horizontal padding at large size
`--ui-password-input-font-size-lg`	`var(--ui-font-size-md)`	Font size at large size
`--ui-password-input-error-border`	`var(--ui-color-danger)`	Error border
`--ui-password-input-success-border`	`var(--ui-color-success)`	Success border

Sizes

<div class="ui-password-input ui-password-input--sm">
  <input class="ui-password-input__field" type="password" placeholder="Small"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>
<div class="ui-password-input">
  <input class="ui-password-input__field" type="password" placeholder="Default"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>
<div class="ui-password-input ui-password-input--lg">
  <input class="ui-password-input__field" type="password" placeholder="Large"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>

Block

<!-- Full-width layout. -->
<div class="ui-password-input ui-password-input--block">
  <input class="ui-password-input__field" type="password" placeholder="Full width"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>

States

<div class="ui-password-input ui-password-input--error">
  <input class="ui-password-input__field" type="password" value="wrongpass"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>
<div class="ui-password-input ui-password-input--success">
  <input class="ui-password-input__field" type="password" value="correctpass"></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>
<div class="ui-password-input ui-password-input--disabled">
  <input class="ui-password-input__field" type="password" placeholder="Disabled" disabled></input>
  <button class="ui-password-input__toggle" type="button" aria-label="Show password" disabled>
    <svg viewBox="0 0 24 24">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
  </button>
</div>