SwitchGroup#
A <SwitchGroup>
can be used to render a set of Switch components.
Import#
import { SwitchGroup } from 'bumbag'
Usage#
Fields#
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.
Horizontal group#
Disabled#
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.
States#
A SwitchGroup can use different states (as per palette) such as danger
, success
and warning
.
Default value#
Specify a default checked value with the defaultValue
prop.
Accessibility#
The <SwitchGroup>
component follows the WAI ARIA Checkbox Pattern.
Rules#
- The outer wrapper of the
SwitchGroup
has a role ofgroup
.
Patterns#
- The switch has a role of
checkbox
. - When the switch has focus, pressing the Space key changes the state of the switch.
References#
Props#
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
Theming#
SwitchGroup.styles.base
Switch.styles.base
Switch.Icon.styles.base
Switch.Label.styles.base
Switch.HiddenInput.styles.base