Components

Password Input

A password field with a reveal toggle.

Usage

Basic

HTML

<bs:bsui-password-input placeholder="Your password" />

Set and confirm

The usual pair, each with its own label and form name.

New password

Confirm password

HTML

<bs:bsui-stack direction="column" gap="4" align="stretch">
  <bs:bsui-field>
    <bs:bsui-field-label text="New password" />
    <bs:bsui-password-input name="password" placeholder="At least 12 characters" />
  </bs:bsui-field>
  <bs:bsui-field>
    <bs:bsui-field-label text="Confirm password" />
    <bs:bsui-password-input name="password_confirm" placeholder="Repeat it" />
  </bs:bsui-field>
</bs:bsui-stack>

Invalid entry

An invalid field colours the control and reveals the error message.

Password

Use at least 12 characters and one number.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-field-label text="Password" />
  <bs:bsui-password-input placeholder="Enter password" />
  <bs:bsui-field-error text="Use at least 12 characters and one number." />
</bs:bsui-field>

Disabled

The reveal button is locked along with the field.

HTML

<bs:bsui-password-input placeholder="Managed by your identity provider" disabled="true" />

Attributes

Attribute	Type	Default
`name`	`text`	—
`placeholder`	`text`	`Enter password`
`disabled`	`toggle`	`false`
`nameAlt`	`text`	—
`onChange`	`text`	—
`value`	`text`	—