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.

github chakra-ui / chakra-ui / packages / chakra-ui / src / CheckboxGroup / CheckboxGroup.tsx View on Github external
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),
        })}