lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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

message text message text message text 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

message text disabled message error message 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

message text disabled message error message 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

message text disabled message error message 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

message text disabled message error message 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

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
accessordetermines whether element is checked
valuestring | number | FormData | File
checkedboolean
formAssociatedboolean
disabledboolean
requiredboolean
readonlyboolean
multipleboolean
autocompletestring
typestring
namestringrepresents the name of the current
element as a string.
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
accessordetermines whether element is checked

CSS Properties

NameTypesDescription
--background
--border
--border-radius
--height
--width
--anchor-background
--anchor-border-radius
--anchor-width
--anchor-height
--toggle-speed