How to use the @chakra-ui/hooks.useCheckboxGroup function in @chakra-ui/hooks
To help you get started, we’ve selected a few @chakra-ui/hooks examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
chakra-ui / chakra-ui / packages / chakra-ui / src / CheckboxGroup / CheckboxGroup.tsx View on Github 
const CheckboxGroup = ({
variantColor,
size,
isInline,
spacing = 2,
children,
...props
}: CheckboxGroupOptions) => {
const checkboxGroup = useCheckboxGroup(props);
const clones = Children.map(children, (child, index) => {
if (!isValidElement(child)) return;
const isLastCheckbox = React.Children.count(children) === index + 1;
const spacingProps = isInline ? { mr: spacing } : { mb: spacing };
return (
{cloneElement(child as React.ReactElement, {
size: size,
variantColor: variantColor,
onChange: () => checkboxGroup.onChange(child.props.value),
isChecked: checkboxGroup.value.includes(child.props.value),
})}@chakra-ui/hooks
React hooks for Chakra components
