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.

Storybook failed to load.

Small

Storybook failed to load.

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

Property PropType Required Default Value
label Node true -
className string false null
small boolean false false

This component uses a hidden <input type="checkbox" />, so it supports all the same properties as it (for example checked).

Theme props

  • switchCheckedColor