[Feature]: CheckboxGroup Component

[Shubhdeep12]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

added some references

• https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html
• https://nextui.org/docs/components/checkbox-group

Additional context

No response

Have you discussed this feature with our team

No response

Validations

• [x] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

None

[nanabear0]

Group checkbox layouts are also part of fluent 2 https://fluent2.microsoft.design/components/web/react/checkbox/usage. I would be nice to have this capability ootb without a need for a custom component.

[tudorpopams]

From a layout point of view, we are trying to leave this to the user (ie not enforce the way a group of checkboxes are organised). From an accessibility POV, you should be able to have full coverage by using a div or a fieldset with its own label or legend tag.

Example:

import * as React from 'react';
import { Checkbox } from '@fluentui/react-components';

const CheckboxGroupExample = () => {
  return (
    <fieldset>
      <legend>Choose your options:</legend>
      <Checkbox label="Option 1" />
      <Checkbox label="Option 2" />
      <Checkbox label="Option 3" />
    </fieldset>
  );
};

export default CheckboxGroupExample;

Are you asking for something more specific than this?

[mfishma]

Looking at accessibility recommendations for Forms, https://www.atomica11y.com/accessible-web/form/ for example, The fieldset has unpredictable styling and isn't Fluent.

How might we achieve the styling without creating an all-new component? Could have something that gets us a group with controls like <Field>'s validation messages and hint texts?

const DateRangeExample = () => {
  return (
    <fieldset>
      <legend><Subtitle2>Date range</Subtitle2></legend>
         <DatePicker aria-label="start date" placeholder="Select a start date..."  />
         <DatePicker aria-label="end date" placeholder="Select an end date..." />
    </fieldset>
   );
};

It defaults to the border and the inline "label" but hoping it looks more a regular Field while still allowing us to put in the labels for the sub-inputs.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".