SwitchGroup#

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

Import#

import { SwitchGroup } from 'bumbag'

Usage#

<SwitchGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

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.

<SwitchGroupField
  label="What's the weather?"
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Horizontal group#

<SwitchGroup
  orientation="horizontal"
  name="weather2"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

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.

<SwitchGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy', disabled: true },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<SwitchGroup
  disabled
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

States#

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

<SwitchGroup
  state="danger"
  name="weather4"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Default value#

Specify a default checked value with the defaultValue prop.

<SwitchGroup
  defaultValue={['overcast', 'sunny']}
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

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#

• WAI ARIA Checkbox Pattern

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#

import { ThemeProvider } from 'bumbag';
const theme = {
  SwitchGroup: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Switch: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Switch: {
    Icon: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Switch: {
    Label: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Switch: {
    HiddenInput: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>