#CheckboxGroup

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

#Import

import { CheckboxGroup } from 'bumbag'

#Usage

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

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

#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, "children"
  | "unstable_system"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | "accessKey"
  | ... 773 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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

overrides 

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

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

themeKey string

#Theming

CheckboxGroup.styles.base
Checkbox.styles.base
Checkbox.Icon.styles.base
Checkbox.Label.styles.base
Checkbox.HiddenInput.styles.base
Copyright © 2020 Jake Moxey