CheckboxGroup CheckboxGroup is used to group related checkboxes.
Import copy import { CheckboxGroup } from '@trendmicro/react-styled-ui' ;
Usage Uncontrolled checkbox group
EDITABLE EXAMPLE
copy < CheckboxGroup defaultValue = { [ "apple" ] } >
< Stack direction = " column " spacing = " 1x " shouldWrapChildren >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
Controlled checkbox group
EDITABLE EXAMPLE
copy function Example ( ) {
const [ value , setValue ] = React . useState ( [ 'apple' ] ) ;
return (
< CheckboxGroup value = { value } onChange = { value => setValue ( value ) } >
< Stack direction = " column " spacing = " 1x " shouldWrapChildren >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
) ;
}
Group orientation Make a set of checkboxes appear horizontal stacked rather than vertically, by adding direction="row" to the Stack component.
EDITABLE EXAMPLE
copy < CheckboxGroup defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
Colors Use the variantColor prop to change the color scheme of the Radio. variantColor can be any color key with key 50(hover), 60(checked) that exist in the theme.colors.
EDITABLE EXAMPLE
copy < CheckboxGroup variantColor = " green " defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
Sizes Use the size prop to change the size of the CheckboxGroup. You can set the value to sm, md, or lg.
EDITABLE EXAMPLE
copy < Stack direction = " column " spacing = " 1x " shouldWrapChildren >
< CheckboxGroup size = " sm " defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
< CheckboxGroup size = " md " defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
< CheckboxGroup size = " lg " defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
</ Stack >
States
EDITABLE EXAMPLE
copy < Stack direction = " column " spacing = " 2x " shouldWrapChildren >
< CheckboxGroup defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
< CheckboxGroup disabled defaultValue = { [ 'apple' ] } >
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
</ Stack >
Asynchronous data loading
EDITABLE EXAMPLE
copy function Example ( ) {
const [ state , setState ] = React . useState ( {
state : 'idle' ,
fruits : [ ] ,
} ) ;
const timerRef = React . useRef ( null ) ;
const fetchData = React . useCallback ( ( ) => {
setState ( prevState => ( { ... prevState , state : 'loading' } ) ) ;
if ( timerRef . current ) {
clearTimeout ( timerRef . current ) ;
timerRef . current = null ;
}
timerRef . current = setTimeout ( ( ) => {
setState ( {
state : 'success' ,
fruits : [ 'apple' ] ,
} ) ;
timerRef . current = null ;
} , 2000 ) ;
} , [ ] ) ;
React . useEffect ( ( ) => {
fetchData ( ) ;
} , [ fetchData ] ) ;
return (
< >
< Box mb = " 4x " >
< LinkButton onClick = { ( ) => fetchData ( ) } >
< Flex align = " center " >
< Icon icon = " redo " spin = { true } animationPlayState = { state . state === 'loading' ? 'running' : 'paused' } />
< Space width = " 2x " />
Reload
</ Flex >
</ LinkButton >
</ Box >
< CheckboxGroup
value = { state . fruits }
disabled = { state . state === 'loading' }
onChange = { value => {
setState ( prevState => ( { ... prevState , fruits : value } ) ) ;
} }
>
< Stack direction = " row " spacing = " 3x " >
< Checkbox value = " apple " > Apple </ Checkbox >
< Checkbox value = " orange " > Orange </ Checkbox >
< Checkbox value = " papaya " > Papaya </ Checkbox >
</ Stack >
</ CheckboxGroup >
</ >
) ;
}
Props Name Type Default Description name string The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name. value Array<Checkbox['value']> The value of the checkbox group. disabled boolean false If true, all checkboxes will be disabled. variantColor string The color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red') size string 'md' The size (width and height) of the checkbox. One of: 'sm', 'md', 'lg' defaultValue Array<Checkbox['value']> The initial value of the checkbox group. children ReactNode The content of the checkbox group. Must be the Checkbox component. onChange function A callback fired when any descendant Checkbox is checked or unchecked.
