Docs updates (#4867)

Author: devongovett

packages/@react-aria/color/docs/useColorArea.mdx

@@ -710,6 +710,14 @@ It's up to you to style your color area to appear disabled accordingly.
   isDisabled />
 ```
 
+### HTML forms
+
+ColorArea supports the `xName` and `yName` props for integration with HTML forms. The values will be submitted as numbers between the minimum and maximum value for the corresponding channel in the X and Y direction.
+
+```tsx example
+<ColorArea xName="red" yName="green" />
+```
+
 ## Internationalization
 
 ### Labeling

packages/@react-aria/color/docs/useColorField.mdx

@@ -141,6 +141,13 @@ The difference is that read only color fields are focusable but disabled color f
 <ColorField defaultValue="#7f007f" isReadOnly />
 ```
 
+### HTML forms
+
+ColorField supports the `name` prop for integration with HTML forms. The value will be submitted to the server as a hex color string.
+
+```tsx example
+<ColorField label="Color" name="color" />
+```
 
 ## Internationalization
 

packages/@react-aria/color/docs/useColorSlider.mdx

@@ -325,6 +325,17 @@ It's up to you to style your color slider to appear disabled accordingly.
 <ColorSlider channel="red" defaultValue="#7f007f" isDisabled />
 ```
 
+### HTML forms
+
+ColorSlider supports the `name` prop for integration with HTML forms. The value will be submitted as a number between the minimum and maximum value for the displayed channel.
+
+```tsx example
+<ColorSlider
+  defaultValue="#7f0000"
+  channel="red"
+  name="red" />
+```
+
 ## Internationalization
 
 ### Labeling

packages/@react-aria/color/docs/useColorWheel.mdx

@@ -189,6 +189,14 @@ It's up to you to style your color wheel to appear disabled accordingly.
 <ColorWheel defaultValue="hsl(80, 100%, 50%)" isDisabled />
 ```
 
+### HTML forms
+
+ColorWheel supports the `name` prop for integration with HTML forms. The value will be submitted as a number between 0 and 360 degrees.
+
+```tsx example
+<ColorWheel name="hue" />
+```
+
 ## Internationalization
 
 ### Labeling

packages/@react-aria/slider/docs/useSlider.mdx

@@ -141,19 +141,20 @@ function Slider(props) {
       }
       {/* The track element holds the visible track line and the thumb. */}
       <div {...trackProps} ref={trackRef} className={`track ${state.isDisabled ? 'disabled' : ''}`}>
-        <Thumb index={0} state={state} trackRef={trackRef} />
+        <Thumb index={0} state={state} trackRef={trackRef} name={props.name} />
       </div>
     </div>
   );
 }
 
 function Thumb(props) {
-  let {state, trackRef, index} = props;
+  let {state, trackRef, index, name} = props;
   let inputRef = React.useRef(null);
   let {thumbProps, inputProps, isDragging} = useSliderThumb({
     index,
     trackRef,
-    inputRef
+    inputRef,
+    name
   }, state);
 
   let {focusProps, isFocusVisible} = useFocusRing();
@@ -421,6 +422,16 @@ A slider can be disabled using the `isDisabled` prop.
   defaultValue={25}
   isDisabled />
 ```
+### HTML forms
+
+useSliderThumb supports the `name` prop for integration with HTML forms.
+
+```tsx example
+<Slider
+  label="Opacity"
+  defaultValue={50}
+  name="opacity" />
+```
 
 ## Internationalization
 

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

@@ -87,6 +87,14 @@ The Checkbox will visually remain indeterminate until the `isIndeterminate` prop
 <Checkbox isIndeterminate>Subscribe</Checkbox>
 ```
 
+### HTML forms
+
+Checkbox supports the `name` and `value` props for integration with HTML forms.
+
+```tsx example
+<Checkbox name="newsletter" value="subscribe">Subscribe</Checkbox>
+```
+
 ## Events
 
 Checkboxes accept a user defined `onChange` prop, triggered whenever the Checkbox is clicked.

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

@@ -80,6 +80,18 @@ function Example() {
 }
 ```
 
+### HTML forms
+
+CheckboxGroup supports the `name` prop, paired with the Checkbox `value` prop, for integration with HTML forms.
+
+```tsx example
+<CheckboxGroup label="Condiments" name="condiments">
+  <Checkbox value="mayo">Mayo</Checkbox>
+  <Checkbox value="mustart">Mustard</Checkbox>
+  <Checkbox value="ketchup">Ketchup</Checkbox>
+</CheckboxGroup>
+```
+
 ## Labeling
 A visual label should be provided for the CheckboxGroup using the `label` prop. If the CheckboxGroup requires an option to be selected by the user,
 the `isRequired` and `necessityIndicator` props can be used to show a required state.

packages/@react-spectrum/color/docs/ColorArea.mdx

@@ -88,6 +88,14 @@ function Example() {
 }
 ```
 
+### HTML forms
+
+ColorArea supports the `xName` and `yName` props for integration with HTML forms. The values will be submitted as numbers between the minimum and maximum value for the corresponding channel in the X and Y direction.
+
+```tsx example
+<ColorArea xName="red" yName="green" />
+```
+
 ## Labeling
 
 By default, ColorArea uses an `aria-label` for the localized string "Color Picker",

packages/@react-spectrum/color/docs/ColorField.mdx

@@ -68,6 +68,14 @@ function Example() {
 }
 ```
 
+### HTML forms
+
+ColorField supports the `name` prop for integration with HTML forms. The value will be submitted to the server as a hex color string.
+
+```tsx example
+<ColorField label="Color" name="color" />
+```
+
 ## Labeling
 
 A visual label should be provided for the ColorField using the `label` prop. If the ColorField is required, the `isRequired` and

packages/@react-spectrum/color/docs/ColorSlider.mdx

@@ -72,6 +72,17 @@ function Example() {
 }
 ```
 
+### HTML forms
+
+ColorSlider supports the `name` prop for integration with HTML forms. The value will be submitted as a number between the minimum and maximum value for the displayed channel.
+
+```tsx example
+<ColorSlider
+  defaultValue="#7f0000"
+  channel="red"
+  name="red" />
+```
+
 ## Labeling
 
 The ColorSlider's channel name and value are shown above the ColorSlider by default. The label and value label can be hidden by providing