CheckboxGroup#

A <CheckboxGroup> can be used to render a set of Checkbox components.

Import#

import { CheckboxGroup } from 'bumbag'

Usage#

Sunny

Windy

Overcast

Editable example

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

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

Fields#

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

It accepts a combination of CheckboxGroup props and FieldWrapper props.

What's the weather?

Sunny

Windy

Overcast

Editable example

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

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

Horizontal group#

Sunny

Windy

Overcast

Editable example

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

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

Sunny

Windy

Overcast

Editable example

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

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

Sunny

Windy

Overcast

Editable example

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

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

States#

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

Sunny

Windy

Overcast

Editable example

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

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

Sunny

Windy

Overcast

Editable example

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

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

Accessibility#

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

Rules#

The outer wrapper of the CheckboxGroup has a role of group.

Patterns#

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

References#

WAI ARIA Checkbox Pattern

Props#

CheckboxGroup Props#

defaultValue string[]

Default value(s) of the checkbox group

disabled boolean

Disables the checkbox group

name string Required

options CheckboxProps[] Required

Checkbox group options

orientation "horizontal" | "vertical"

Are the checkbox inputs layed out horizontally or vertically?

spacing string

state string

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

value string[]

Controlled value of the checkbox 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

CheckboxGroupField Props#

checkboxGroupProps

Pick<BoxProps, "unstable_system"
  | "top"
  | "right"
  | "bottom"
  | "left"
  | "children"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | ... 778 more ...
  | "themeKey"> & LocalCheckboxGroupProps

Additional props for the CheckboxGroup component

Inherits CheckboxGroup props

defaultValue string[]

Default value(s) of the checkbox group

disabled boolean

Disables the checkbox group

name string Required

options CheckboxProps[] Required

Checkbox group options

orientation "horizontal" | "vertical"

Are the checkbox inputs layed out horizontally or vertically?

spacing string

state string

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

value string[]

Controlled value of the checkbox 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

Inherits FieldWrapper props

children

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

label

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the label on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

CheckboxGroup.styles.base

Sunny

Windy

Overcast

Checkbox.styles.base

Sunny

Windy

Overcast

Checkbox.Icon.styles.base

Sunny

Windy

Overcast

Checkbox.Label.styles.base

Sunny

Windy

Overcast

Checkbox.HiddenInput.styles.base

Sunny

Windy

Overcast

On this page