Switch

Switches allow users to toggle between two states, on or off. On mobile, these are often used as a replacement for checkboxes.

Default

The switch component uses a regular HTML checkbox behind the scenes to maintain semantic markup and good accessibility.

Small

bpk-component-switch

Backpack switch component.

Installation

Check the main Readme for a complete installation guide.

Usage

import BpkSwitch from '@skyscanner/backpack-web/bpk-component-switch';

export default () => (
  <div>
    <BpkSwitch label="Switched on" checked />
    <BpkSwitch label="Turned off" />
  </div>
)

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props