@base-ui-components/react/esm/checkbox-group/useCheckboxGroup.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../utils/mergeReactProps.js';
import { useControlled } from '../utils/useControlled.js';
import { useEventCallback } from '../utils/useEventCallback.js';
import { useCheckboxGroupParent } from './useCheckboxGroupParent.js';
import { useFieldRootContext } from '../field/root/FieldRootContext.js';
export function useCheckboxGroup(params) {
  const {
    allValues,
    value: externalValue,
    defaultValue,
    onValueChange
  } = params;
  const {
    labelId
  } = useFieldRootContext();
  const [value, setValueUnwrapped] = useControlled({
    controlled: externalValue,
    default: defaultValue,
    name: 'CheckboxGroup',
    state: 'value'
  });
  const setValue = useEventCallback((v, event) => {
    setValueUnwrapped(v);
    onValueChange?.(v, event);
  });
  const parent = useCheckboxGroupParent({
    allValues,
    value: externalValue,
    onValueChange
  });
  const getRootProps = React.useCallback((externalProps = {}) => mergeReactProps(externalProps, {
    role: 'group',
    'aria-labelledby': labelId
  }), [labelId]);
  return React.useMemo(() => ({
    getRootProps,
    value,
    setValue,
    parent
  }), [getRootProps, value, setValue, parent]);
}