# All files / src/CheckboxGroup CheckboxGroup.tsx

100% Statements 14/14
50% Branches 2/4
100% Functions 1/1
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    412x
    2x
    2x
    2x

    2x

    2x

    4x
    4x
    4x

    4x

    4x

     import { useCheckboxGroup } from '@react-aria/checkbox'
    import React from 'react'
    import { CheckboxGroupState, useCheckboxGroupState } from 'react-stately'
    import { StyledLabel } from '../Form/Form.styles'
    import { CheckboxGroupProps } from './CheckboxGroup.types'

    export const CheckboxGroupContext =
      React.createContext<CheckboxGroupState | null>(null)

    /**
     * Checkbox groups allow users to select multiple items from a list of options.
     *
     * Supported components: <NextTile role="checkbox">.
     *
     * @since 11.6.0
     */
    export const CheckboxGroup = React.forwardRef<
      HTMLDivElement,
      CheckboxGroupProps
    >(function CheckboxGroup({ disabled, ...props_ }, ref) {
      const props = { ...props_, isDisabled: disabled }
      const state = useCheckboxGroupState(props)

      const { groupProps, labelProps } = useCheckboxGroup(props, state)

      return (
        <div {...groupProps}>
          {props.label != null ? (
            typeof props.label === 'string' ? (
              <StyledLabel {...labelProps}>{props.label}</StyledLabel>
            ) : (
              <div {...labelProps}>{props.label}</div>
            )
          ) : null}
          <CheckboxGroupContext.Provider value={state}>
            {props.children}
          </CheckboxGroupContext.Provider>
        </div>
      )
    })