@primer/react/lib-esm/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import VisuallyHidden from '../../../_VisuallyHidden.js';
import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext.js';
import classes from './CheckboxOrRadioGroup.module.css.js';
import { Stack } from '../../../Stack/index.js';
import { clsx } from 'clsx';
import { jsx, jsxs } from 'react/jsx-runtime';

const CheckboxOrRadioGroupLabel = ({
  children,
  className,
  visuallyHidden = false,
  sx
}) => {
  const {
    required,
    disabled
  } = React.useContext(CheckboxOrRadioGroupContext);
  return /*#__PURE__*/jsx(VisuallyHidden, {
    className: clsx(className, classes.RadioGroupLabel),
    isVisible: !visuallyHidden,
    title: required ? 'required field' : undefined,
    "data-label-disabled": disabled ? '' : undefined,
    sx: sx,
    children: required ? /*#__PURE__*/jsxs(Stack, {
      direction: "horizontal",
      gap: "none",
      children: [/*#__PURE__*/jsx("div", {
        className: classes.GroupLabelChildren,
        children: children
      }), /*#__PURE__*/jsx("span", {
        children: "*"
      })]
    }) : children
  });
};
CheckboxOrRadioGroupLabel.displayName = "CheckboxOrRadioGroupLabel";

export { CheckboxOrRadioGroupLabel as default };