Merge branch 'main' into mp/segmented-control-default-uncontrolled

Author: mperrotti

docs/content/Checkbox.mdx

@@ -45,7 +45,7 @@ The `Checkbox` component can be used in controlled and uncontrolled modes.
   technologies.
 </Note>
 
-## Indeterminate
+### Indeterminate
 
 An `indeterminate` checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.
 
@@ -74,6 +74,34 @@ An `indeterminate` checkbox state should be used if the input value is neither t
 </form>
 ```
 
+### Grouping Checkbox components
+
+If you're not building something custom, you should use the [CheckboxGroup](/CheckboxGroup) component to render a group of checkbox inputs.
+
+```jsx live
+<form>
+  <CheckboxGroup>
+    <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
+    <FormControl>
+      <Checkbox value="1" />
+      <FormControl.Label>Checkbox 1</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Checkbox value="2" />
+      <FormControl.Label>Checkbox 2</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Checkbox value="3" />
+      <FormControl.Label>Checkbox 3</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Checkbox value="4" />
+      <FormControl.Label>Checkbox 4</FormControl.Label>
+    </FormControl>
+  </CheckboxGroup>
+</form>
+```
+
 ## Props
 
 <PropsTable>

docs/content/Radio.mdx

@@ -31,11 +31,39 @@ Please use a [Checkbox](/Checkbox) if the user needs to select more than one opt
 
 </Note>
 
-## Grouping Radio components
+### Grouping Radio components
 
 Use the `name` prop to group together related `Radio` components in a list.
 
-If you're not building something custom, you should use the [ChoiceFieldset](/ChoiceFieldset) component to render a group of radio inputs.
+If you're not building something custom, you should use the [RadioGroup](/RadioGroup) component to render a group of radio inputs.
+
+#### Using `RadioGroup`
+
+```jsx live
+<form>
+  <RadioGroup name="radioGroup-example">
+    <RadioGroup.Label>Choices</RadioGroup.Label>
+    <FormControl>
+      <Radio value="1" />
+      <FormControl.Label>Radio 1</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Radio value="2" />
+      <FormControl.Label>Radio 2</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Radio value="3" />
+      <FormControl.Label>Radio 3</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Radio value="4" />
+      <FormControl.Label>Radio 4</FormControl.Label>
+    </FormControl>
+  </RadioGroup>
+</form>
+```
+
+#### Using `name` to group Radio components
 
 ```jsx live
 <form>