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
`value`	`string \| number \| FormData \| File`	Defines the value of the switch for form submission when checked
`checked`	`boolean`	Controls the checked state of the switch
`formAssociated`	`boolean`
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`formNoValidate`	`boolean`	determines if the form control is novalidate
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`value`	`string \| number \| FormData \| File`	Defines the value of the switch for form submission when checked
`checked`	`boolean`	Controls the checked state of the switch
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`formNoValidate`	`boolean`	determines if the form control is novalidate
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters

CSS Properties

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