A <SwitchGroup> can be used to render a set of Switch components.


import { SwitchGroup } from 'bumbag'


Editable example


You can also use the <SwitchGroupField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of SwitchGroup props and FieldWrapper props.

What's the weather?
Editable example

#Horizontal group

Editable example


You can disable a radio group with the disabled prop. If you only want to disable one option, add the disabled: true attribute to the option.

Editable example
Editable example


A SwitchGroup can use different states (as per palette) such as danger, success and warning.

Editable example

#Default value

Specify a default checked value with the defaultValue prop.

Editable example


The <SwitchGroup> component follows the WAI ARIA Checkbox Pattern.


  • The outer wrapper of the SwitchGroup has a role of group.


  • The switch has a role of checkbox.
  • When the switch has focus, pressing the Space key changes the state of the switch.



#SwitchGroup Props

defaultValue string[]

Default value(s) of the switch group

disabled boolean

Disables the switch group

orientation "horizontal" | "vertical"

Are the switch inputs layed out horizontally?

name string Required

options SwitchProps[] Required

Switch group options

spacing string

state string

State of the switch group. Can be any color in the palette.

value string[]

Controlled value of the switch group

onChange (value: string[], targetValue: string) => void

Function to invoke when checkbox group has changed

onBlur (value: string[]) => void

Function to invoke when checkbox group has blurred


On this page
Copyright © 2021 Jake Moxey