Switch

Use the switch input component for boolean-like options, such as enabling/disabling notifications, or for settings that can be toggled between two states.

Example

Allows users to toggle a setting between on and off states.

switch

message text

code

<script type="module">
  import '@blueprintui/components/include/switch.js';
</script>

<bp-field>
  <label>switch</label>
  <bp-switch checked></bp-switch>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical Group

Demonstrates switch groups in vertical form layout.

label switch 1

switch 2

switch 3

message text

disabled switch 1

switch 2

switch 3

message text

error switch 1

switch 2

switch 3

message text

success switch 1

switch 2

switch 3

message text

code

<bp-form-group layout="vertical">
  <bp-fieldset>
    <label>label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <!-- disable all controls within group or set disabled on input individually -->
  <bp-fieldset disabled>
    <label>disabled</label>

    <label>switch 1</label>
    <bp-switch checked disabled></bp-switch>

    <label>switch 2</label>
    <bp-switch disabled></bp-switch>

    <label>switch 3</label>
    <bp-switch disabled></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset status="error">
    <label>error</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="error">message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset status="success">
    <label>success</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="success">message text</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Vertical Inline Group

Demonstrates switch groups in vertical inline form layout.

label switch 1

switch 2

switch 3

message text

disabled switch 1

switch 2

switch 3

disabled message

error switch 1

switch 2

switch 3

error message

success switch 1

switch 2

switch 3

success message

code

<bp-form-group layout="vertical-inline">
  <bp-fieldset layout="vertical-inline">
    <label>label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" disabled>
    <label>disabled</label>

    <label>switch 1</label>
    <bp-switch checked disabled></bp-switch>

    <label>switch 2</label>
    <bp-switch disabled></bp-switch>

    <label>switch 3</label>
    <bp-switch disabled></bp-switch>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="error">
    <label>error</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="success">
    <label>success</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Group

Demonstrates switch groups in horizontal form layout.

label switch 1

switch 2

switch 3

message text

disabled switch 1

switch 2

switch 3

disabled message

error switch 1

switch 2

switch 3

error message

success switch 1

switch 2

switch 3

success message

code

<bp-form-group layout="horizontal">
  <bp-fieldset layout="horizontal">
    <label>label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" disabled>
    <label>disabled</label>

    <label>switch 1</label>
    <bp-switch checked disabled></bp-switch>

    <label>switch 2</label>
    <bp-switch disabled></bp-switch>

    <label>switch 3</label>
    <bp-switch disabled></bp-switch>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="error">
    <label>error</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="success">
    <label>success</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Inline Group

Demonstrates switch groups in horizontal inline form layout.

label switch 1

switch 2

switch 3

message text

disabled switch 1

switch 2

switch 3

disabled message

error switch 1

switch 2

switch 3

error message

success switch 1

switch 2

switch 3

success message

code

<bp-form-group layout="horizontal-inline">
  <bp-fieldset layout="horizontal-inline">
    <label>label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" disabled>
    <label>disabled</label>

    <label>switch 1</label>
    <bp-switch checked disabled></bp-switch>

    <label>switch 2</label>
    <bp-switch disabled></bp-switch>

    <label>switch 3</label>
    <bp-switch disabled></bp-switch>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="error">
    <label>error</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="success">
    <label>success</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Compact Group

Demonstrates switch groups in compact form layout.

label switch 1

switch 2

switch 3

message text

disabled switch 1

switch 2

switch 3

disabled message

error switch 1

switch 2

switch 3

error message

success switch 1

switch 2

switch 3

success message

code

<bp-form-group layout="compact">
  <bp-fieldset layout="compact">
    <label>label</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" disabled>
    <label>disabled</label>

    <label>switch 1</label>
    <bp-switch checked disabled></bp-switch>

    <label>switch 2</label>
    <bp-switch disabled></bp-switch>

    <label>switch 3</label>
    <bp-switch disabled></bp-switch>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="error">
    <label>error</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="success">
    <label>success</label>

    <label>switch 1</label>
    <bp-switch checked></bp-switch>

    <label>switch 2</label>
    <bp-switch></bp-switch>

    <label>switch 3</label>
    <bp-switch></bp-switch>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/switch.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/switch.js/+esm';
</script>

Accessibility

The switch input component should have an accessible label that describes its purpose and state.
The switch input component should be keyboard accessible, allowing users to use the keyboard to select and activate the switch.
The switch input component should also have clear visual indication of its state (e.g. switched on or off), and change state when activated by either the mouse or keyboard.

bp-switch

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description

CSS Properties

Name	Types	Description
`--background`
`--border`
`--border-radius`
`--height`
`--width`
`--anchor-background`
`--anchor-border-radius`
`--anchor-width`
`--anchor-height`
`--toggle-speed`