Add docs for HelpText to CheckboxGroup and RadioGroup (#3528)

* add to checkbox group

* add to radio group

* add to CheckboxGroup docs

* add to RadioGroup docs

* add to useCheckboxGroup docs

* add to useRadioGroup docs

* update error display logic in docs

* fix merge conflict

* fix merge

* example update

Co-authored-by: Danni <[email protected]>

Author: reidbarber

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -96,7 +96,7 @@ standalone checkbox, use the [useCheckbox](useCheckbox.html) hook instead.
 
 This example uses native input elements for the checkboxes, and React context to share state from the group
 to each checkbox. An HTML `<label>` element wraps the native input and the text to provide an implicit label
-for the radio.
+for the checkbox.
 
 ```tsx example export=true
 import {useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
@@ -105,16 +105,20 @@ import {useCheckboxGroupState} from '@react-stately/checkbox';
 let CheckboxGroupContext = React.createContext(null);
 
 function CheckboxGroup(props) {
-  let {children, label} = props;
+  let {children, label, description, errorMessage, validationState} = props;
   let state = useCheckboxGroupState(props);
-  let {groupProps, labelProps} = useCheckboxGroup(props, state);
+  let {groupProps, labelProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);
 
   return (
     <div {...groupProps}>
       <span {...labelProps}>{label}</span>
       <CheckboxGroupContext.Provider value={state}>
         {children}
       </CheckboxGroupContext.Provider>
+      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
+      {errorMessage && validationState === 'invalid' &&
+        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{errorMessage}</div>
+      }
     </div>
   );
 }
@@ -196,6 +200,31 @@ function Example() {
 }
 ```
 
+### Description
+
+The `description` prop can be used to associate additional help text with a checkbox group.
+
+```tsx example
+<CheckboxGroup label="Favorite sports" description="Select your favorite sports.">
+  <Checkbox value="soccer">Soccer</Checkbox>
+  <Checkbox value="baseball">Baseball</Checkbox>
+  <Checkbox value="basketball">Basketball</Checkbox>
+</CheckboxGroup>
+```
+
+### Error message
+
+The `errorMessage` prop can be used to help the user fix a validation error. It should be combined with the `validationState` prop to
+semantically mark the checkbox group as invalid for assistive technologies.
+
+```tsx example
+<CheckboxGroup label="Favorite sports" errorMessage="Invalid selection of sports." validationState="invalid">
+  <Checkbox value="soccer">Soccer</Checkbox>
+  <Checkbox value="baseball">Baseball</Checkbox>
+  <Checkbox value="basketball">Basketball</Checkbox>
+</CheckboxGroup>
+```
+
 ### Disabled
 
 The entire CheckboxGroup can be disabled with the `isDisabled` prop.

packages/@react-aria/radio/docs/useRadioGroup.mdx

@@ -102,16 +102,20 @@ import {useRadioGroupState} from '@react-stately/radio';
 let RadioContext = React.createContext(null);
 
 function RadioGroup(props) {
-  let {children, label} = props;
+  let {children, label, description, errorMessage, validationState} = props;
   let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps} = useRadioGroup(props, state);
+  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup(props, state);
 
   return (
     <div {...radioGroupProps}>
       <span {...labelProps}>{label}</span>
       <RadioContext.Provider value={state}>
         {children}
       </RadioContext.Provider>
+      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
+      {errorMessage && validationState === 'invalid' &&
+        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{errorMessage}</div>
+      }
     </div>
   )
 }
@@ -158,16 +162,20 @@ import {useFocusRing} from '@react-aria/focus';
 let RadioContext = React.createContext(null);
 
 function RadioGroup(props) {
-  let {children, label} = props;
+  let {children, label, description, errorMessage, validationState} = props;
   let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps} = useRadioGroup(props, state);
+  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup(props, state);
 
   return (
     <div {...radioGroupProps}>
       <span {...labelProps}>{label}</span>
       <RadioContext.Provider value={state}>
         {children}
       </RadioContext.Provider>
+      {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
+      {errorMessage && validationState === 'invalid' &&
+        <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{errorMessage}</div>
+      }
     </div>
   )
 }
@@ -274,6 +282,29 @@ function Example() {
 }
 ```
 
+### Description
+
+The `description` prop can be used to associate additional help text with a radio group.
+
+```tsx example
+<RadioGroup label="Favorite pet" description="Select your favorite pet.">
+  <Radio value="dogs">Dogs</Radio>
+  <Radio value="cats">Cats</Radio>
+</RadioGroup>
+```
+
+### Error message
+
+The `errorMessage` prop can be used to help the user fix a validation error. It should be combined with the `validationState` prop to
+semantically mark the radio group as invalid for assistive technologies.
+
+```tsx example
+<RadioGroup label="Favorite pet" errorMessage="Invalid pet selection." validationState="invalid">
+  <Radio value="dogs">Dogs</Radio>
+  <Radio value="cats">Cats</Radio>
+</RadioGroup>
+```
+
 ### Disabled
 
 The entire RadioGroup can be disabled with the `isDisabled` prop.

packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx

@@ -228,6 +228,36 @@ and "end" refers to the right most edge. For right-to-left (RTL) languages, this
 </CheckboxGroup>
 ```
 
+### Help text
+[View guidelines](https://spectrum.adobe.com/page/checkbox-group/#Help-text-(description-and-error-message))
+
+Both a description and an error message can be supplied to a CheckboxGroup. The description is always visible unless the `validationState` is “invalid” and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized.
+
+```tsx example
+function Example() {
+  let [checked, setChecked] = React.useState(['dogs', 'dragons']);
+  let isValid = checked.length === 2 && checked.includes('dogs') && checked.includes('dragons');
+
+  return (
+    <CheckboxGroup
+      label="Pets"
+      onChange={setChecked}
+      value={checked}
+      validationState={isValid ? 'valid' : 'invalid'}
+      description="Select your pets."
+      errorMessage={
+        checked.includes('cats')
+          ? 'No cats allowed.'
+          : 'Select only dogs and dragons.'
+      }>
+      <Checkbox value="dogs">Dogs</Checkbox>
+      <Checkbox value="cats">Cats</Checkbox>
+      <Checkbox value="dragons">Dragons</Checkbox>
+    </CheckboxGroup>
+  );
+}
+```
+
 ### Disabled
 [View guidelines](https://spectrum.adobe.com/page/checkbox/#Disabled)
 

packages/@react-spectrum/radio/docs/RadioGroup.mdx

@@ -185,6 +185,41 @@ and "end" refers to the right most edge. For right-to-left (RTL) languages, this
 </RadioGroup>
 ```
 
+### Help text
+[View guidelines](https://spectrum.adobe.com/page/radio-group/#Help-text-(description-and-error-message))
+
+Both a description and an error message can be supplied to a RadioGroup. The description is always visible unless the `validationState` is “invalid” and an error message is provided. The error message can be used to help the user fix their input quickly and should be specific to the detected error. All strings should be localized.
+
+```tsx example
+function Example() {
+  let [selected, setSelected] = React.useState('dogs');
+  let isValid = selected === 'dogs';
+
+  return (
+    <RadioGroup
+      aria-label="Favorite pet"
+      onChange={setSelected}
+      validationState={isValid ? 'valid' : 'invalid'}
+      description="Please select a pet."
+      errorMessage={
+        selected === 'cats'
+          ? 'No cats allowed.'
+          : 'Please select dogs.'
+      }>
+      <Radio value="dogs">
+        Dogs
+      </Radio>
+      <Radio value="cats">
+        Cats
+      </Radio>
+      <Radio value="dragons">
+        Dragons
+      </Radio>
+    </RadioGroup>
+  );
+}
+```
+
 ### Disabled
 [View guidelines](https://spectrum.adobe.com/page/radio-button/#Disabled)