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