#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.

What's the weather?

#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 of group.

#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
Copyright © 2020 Jake Moxey