Components

Switch

Toggles a setting that applies immediately.

Usage

Basic

Email notifications

HTML

<bs:bsui-switch label="Email notifications" defaultChecked="true" />

Preferences

Switches apply immediately, so a list of them needs no save button.

Deploy summaries Build failures Product news

HTML

<bs:bsui-stack direction="column" gap="4">
  <bs:bsui-switch name="deploys" label="Deploy summaries" defaultChecked="true" />
  <bs:bsui-switch name="failures" label="Build failures" defaultChecked="true" />
  <bs:bsui-switch name="news" label="Product news" />
</bs:bsui-stack>

Read only and disabled

A read only switch keeps showing its value but refuses to toggle, while a disabled one dims as well.

Two factor authentication Single sign-on

HTML

<bs:bsui-stack direction="column" gap="4">
  <bs:bsui-switch label="Two factor authentication" defaultChecked="true" readOnly="true" />
  <bs:bsui-switch label="Single sign-on" disabled="true" />
</bs:bsui-stack>

Custom values

The on and off positions can submit anything, not just on and empty.

Digest emails Send a weekly digest Submits weekly while it is on and never while it is off.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Digest emails" />
  <bs:bsui-switch name="digest" label="Send a weekly digest" checkedValue="weekly" uncheckedValue="never" defaultChecked="true" />
  <bs:bsui-field-description text="Submits weekly while it is on and never while it is off." />
</bs:bsui-field>

Anatomy

Switch is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/switch
bsui/switch-thumb

Attributes

Attribute	Type	Default
`defaultChecked`	`toggle`	`false`
`disabled`	`toggle`	`false`
`readOnly`	`toggle`	`false`
`required`	`toggle`	`false`
`name`	`text`	—
`checkedValue`	`text`	`on`
`uncheckedValue`	`text`	—
`label`	`richtext`	—
`bindText`	`text`	—
`nameAlt`	`text`	—
`onChange`	`text`	—
`checked`	`text`	—

`bsui/switch-thumb`

This block takes no attributes.