diff --git a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
index ba636bfa7a1..6fee4d1e234 100644
--- a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
@@ -11,12 +11,15 @@
  */
 
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ComboBox} from '@react-spectrum/combobox';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
 import {Meta, Story} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
 
@@ -34,22 +37,35 @@ let flatOptions = [
 
 const Template = (): Story<SpectrumFormProps> => (args) => (
   <Form {...args}>
-    <TextField label="City" placeholder="San Francisco" />
-    <Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
-      {item => <Item key={item.id}>{item.name}</Item>}
-    </Picker>
-    <NumberField label="Test" />
     <CheckboxGroup defaultValue={['dragons']} label="Pets">
       <Checkbox value="dogs">Dogs</Checkbox>
       <Checkbox value="cats">Cats</Checkbox>
       <Checkbox value="dragons">Dragons</Checkbox>
     </CheckboxGroup>
+    <ComboBox label="More Animals">
+      <Item key="red panda">Red Panda</Item>
+      <Item key="aardvark">Aardvark</Item>
+      <Item key="kangaroo">Kangaroo</Item>
+      <Item key="snake">Snake</Item>
+    </ComboBox>
+    <NumberField label="Test" />
+    <Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
+      {item => <Item key={item.id}>{item.name}</Item>}
+    </Picker>
     <RadioGroup defaultValue="dragons" label="Favorite pet" name="favorite-pet-group">
       <Radio value="dogs">Dogs</Radio>
       <Radio value="cats">Cats</Radio>
       <Radio value="dragons">Dragons</Radio>
     </RadioGroup>
+    <SearchField label="Search" />
+    <SearchWithin label="Search">
+      <SearchField placeholder="Search" />
+      <Picker label="State" placeholder="Select a state" items={flatOptions}>
+        {item => <Item key={item.id}>{item.name}</Item>}
+      </Picker>
+    </SearchWithin>
     <TextArea label="Comments" placeholder="How do you feel?" />
+    <TextField label="City" placeholder="San Francisco" />
   </Form>
 );
 
@@ -66,6 +82,10 @@ export const LabelAlignEnd = Template().bind({});
 LabelAlignEnd.storyName = 'label align: end';
 LabelAlignEnd.args = {...Default.args, labelAlign: 'end'};
 
+export const LabelAlignSideEnd = Template().bind({});
+LabelAlignSideEnd.storyName = 'label position: side, label align: end';
+LabelAlignSideEnd.args = {...Default.args, labelPosition: 'side', labelAlign: 'end'};
+
 export const Required = Template().bind({});
 Required.storyName = 'isRequired';
 Required.args = {...Default.args, isRequired: true};
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index ff721186322..da37fe003d2 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -14,6 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ComboBox} from '@react-spectrum/combobox';
 import {countries, states} from './data';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
@@ -24,6 +25,7 @@ import React, {Key, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
 import {storiesOf} from '@storybook/react';
+import {Switch} from '@react-spectrum/switch';
 import {TextArea, TextField} from '@react-spectrum/textfield';
 
 storiesOf('Form', module)
@@ -133,28 +135,24 @@ storiesOf('Form', module)
 function render(props: any = {}) {
   return (
     <Form {...props}>
-      <TextField label="First Name" placeholder="John" />
-      <TextField label="Last Name" placeholder="Smith" />
-      <TextField label="Street Address" placeholder="123 Any Street" description="Please include apartment or suite number." errorMessage="Please enter a valid street address." />
-      <TextField label="City" placeholder="San Francisco" />
+      <CheckboxGroup defaultValue={['dragons']} label="Pets">
+        <Checkbox value="dogs">Dogs</Checkbox>
+        <Checkbox value="cats">Cats</Checkbox>
+        <Checkbox value="dragons">Dragons</Checkbox>
+      </CheckboxGroup>
+      <ComboBox label="More Animals">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
       <NumberField label="Years lived there" />
       <Picker label="State" placeholder="Select a state" items={states}>
         {item => <Item key={item.abbr}>{item.name}</Item>}
       </Picker>
-      <TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
       <Picker label="Country" placeholder="Select a country" items={countries}>
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
-      <CheckboxGroup defaultValue={['dragons']} label="Pets">
-        <Checkbox value="dogs">Dogs</Checkbox>
-        <Checkbox value="cats">Cats</Checkbox>
-        <Checkbox value="dragons">Dragons</Checkbox>
-      </CheckboxGroup>
-      <RadioGroup label="Favorite pet" name="favorite-pet-group">
-        <Radio value="dogs">Dogs</Radio>
-        <Radio value="cats">Cats</Radio>
-        <Radio value="dragons">Dragons</Radio>
-      </RadioGroup>
       <Picker label="Favorite color" description="Select any color you like." errorMessage="Please select a nicer color.">
         <Item>Red</Item>
         <Item>Orange</Item>
@@ -163,13 +161,22 @@ function render(props: any = {}) {
         <Item>Blue</Item>
         <Item>Purple</Item>
       </Picker>
-      <TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
-      <SearchWithin label="Search">
-        <SearchField placeholder="Search" />
+      <RadioGroup label="Favorite pet" name="favorite-pet-group">
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="dragons">Dragons</Radio>
+      </RadioGroup>
+      <SearchField label="Search" />
+      <SearchWithin label="Search cities">
+        <SearchField placeholder="City" />
         <Picker label="State" placeholder="Select a state" items={states}>
           {item => <Item key={item.abbr}>{item.name}</Item>}
         </Picker>
       </SearchWithin>
+      <Switch>Low power mode</Switch>
+      <TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
+      <TextField label="City" placeholder="San Francisco" />
+      <TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
     </Form>
   );
 }
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
index c49e09c2367..48c7023c460 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -11,16 +11,22 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {Checkbox} from '@react-spectrum/checkbox';
+import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, Story} from '@storybook/react';
+import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
+import {ProviderProps} from '@react-types/provider';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
-import {storiesOf} from '@storybook/react';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
 
@@ -30,37 +36,113 @@ const THEME = {
   large: scaleLarge
 };
 
-storiesOf('Provider', module)
-  // don't need all the isEmphasized etc tests, the value being sent is tested in unit tests
-  // that the components look correctly with those values is being tested in those components chromatic tests
-
-  // keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
-  .add(
-    'custom theme',
-    () => render({theme: THEME})
-  );
-
-function render(props = {}) {
-  return (
-    <Provider {...props} UNSAFE_style={{padding: 50}}>
-      <Form>
-        <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
-          <Button variant="primary">I am a button</Button>
-        </Flex>
-        <TextField
-          label="A text field"
-          placeholder="Something"
-          marginTop="size-100"
-          necessityIndicator="label"
-          value="dummy value" />
-        <Checkbox isSelected>Cats!</Checkbox>
-        <Switch isSelected>Dogs!</Switch>
-        <RadioGroup value="dogs" label="A radio group">
-          <Radio value="dogs">Dogs</Radio>
-          <Radio value="cats">Cats</Radio>
-          <Radio value="horses">Horses</Radio>
-        </RadioGroup>
-      </Form>
+const meta: Meta<ProviderProps> = {
+  title: 'Provider'
+};
+
+export default meta;
+
+const Template = (): Story<ProviderProps> => (args) => (
+  <Provider {...args} UNSAFE_style={{padding: 50}}>
+    <Form>
+      <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
+        <Button variant="primary">I am a button</Button>
+      </Flex>
+      <Checkbox isSelected>Cats!</Checkbox>
+      <CheckboxGroup defaultValue={['dragons']} label="Pets">
+        <Checkbox value="dogs">Dogs</Checkbox>
+        <Checkbox value="cats">Cats</Checkbox>
+        <Checkbox value="dragons">Dragons</Checkbox>
+      </CheckboxGroup>
+      <ComboBox label="More Animals">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
+      <NumberField label="Years lived there" />
+      <RadioGroup value="dogs" label="A radio group">
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="horses">Horses</Radio>
+      </RadioGroup>
+      <SearchField label="Search" />
+      <SearchWithin label="Search">
+        <SearchField placeholder="Search" />
+        <Picker name="favorite-color3" label="Favorite color searchwithin">
+          <Item key="red">Red</Item>
+          <Item key="orange">Orange</Item>
+          <Item key="yellow">Yellow</Item>
+          <Item key="green">Green</Item>
+          <Item key="blue">Blue</Item>
+          <Item key="purple">Purple</Item>
+        </Picker>
+      </SearchWithin>
+      <Switch isSelected>Dogs!</Switch>
+      <TextField
+        label="A text field"
+        placeholder="Something"
+        marginTop="size-100"
+        necessityIndicator="label"
+        value="dummy value" />
+    </Form>
+  </Provider>
+);
+
+const NestedColorSchemeTemplate = (): Story<ProviderProps> => () => (
+  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
+    <Button variant="primary">I am a dark button</Button>
+    <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
+      <Button variant="primary">I am a light button</Button>
     </Provider>
-  );
-}
+  </Provider>
+);
+
+const NestedPropTemplate = (): Story<ProviderProps> => () => (
+  <Provider isDisabled>
+    <Button variant="primary">I am disabled</Button>
+    <Provider isQuiet>
+      <Button variant="primary">I am disabled and quiet</Button>
+    </Provider>
+  </Provider>
+);
+
+export const Default = Template().bind({});
+Default.storyName = 'default';
+Default.args = {};
+
+// keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
+export const CustomTheme = Template().bind({});
+CustomTheme.storyName = 'custom theme';
+CustomTheme.args = {theme: THEME};
+
+export const NestedColorScheme = NestedColorSchemeTemplate().bind({});
+NestedColorScheme.storyName = 'nested color schemes';
+NestedColorScheme.args = {};
+
+export const NestedProp = NestedPropTemplate().bind({});
+NestedProp.storyName = 'nested props';
+NestedProp.args = {};
+
+// Previous this weren't included because of unit tests and visual comparisions
+// in the individual components, but we should have this to confirm that components
+// are using usePRoviderProps correctly
+export const Quiet = Template().bind({});
+Quiet.storyName = 'isQuiet';
+Quiet.args = {isQuiet: true};
+
+export const Emphasized = Template().bind({});
+Emphasized.storyName = 'isEmphasized';
+Emphasized.args = {isEmphasized: true};
+
+export const Disabled = Template().bind({});
+Disabled.storyName = 'isDisabled';
+Disabled.args = {isDisabled: true};
+
+export const ReadOnly = Template().bind({});
+ReadOnly.storyName = 'isReadOnly';
+ReadOnly.args = {isReadOnly: true};
+
+export const Required = Template().bind({});
+Required.storyName = 'isRequired';
+Required.args = {isRequired: true};
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 8d362f5e331..cd88ac4f395 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -11,15 +11,20 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {Checkbox} from '@react-spectrum/checkbox';
+import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Item, Picker} from '@react-spectrum/picker';
+import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -168,18 +173,42 @@ function render(props = {}) {
         <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
           <Button variant="primary">I am a button</Button>
         </Flex>
-        <TextField
-          label="A text field"
-          placeholder="Something"
-          marginTop="size-100"
-          necessityIndicator="label" />
-        <Checkbox>Cats!</Checkbox>
-        <Switch>Dogs!</Switch>
+        <CheckboxGroup defaultValue={['dragons']} label="Pets">
+          <Checkbox value="dogs">Dogs</Checkbox>
+          <Checkbox value="cats">Cats</Checkbox>
+          <Checkbox value="dragons">Dragons</Checkbox>
+        </CheckboxGroup>
+        <ComboBox label="More Animals">
+          <Item key="red panda">Red Panda</Item>
+          <Item key="aardvark">Aardvark</Item>
+          <Item key="kangaroo">Kangaroo</Item>
+          <Item key="snake">Snake</Item>
+        </ComboBox>
+        <NumberField label="Years lived there" />
         <RadioGroup label="A radio group">
           <Radio value="dogs">Dogs</Radio>
           <Radio value="cats">Cats</Radio>
           <Radio value="horses">Horses</Radio>
         </RadioGroup>
+        <SearchField label="Search" />
+        <SearchWithin label="Search">
+          <SearchField placeholder="Search" />
+          <Picker name="favorite-color3" label="Favorite color searchwithin">
+            <Item key="red">Red</Item>
+            <Item key="orange">Orange</Item>
+            <Item key="yellow">Yellow</Item>
+            <Item key="green">Green</Item>
+            <Item key="blue">Blue</Item>
+            <Item key="purple">Purple</Item>
+          </Picker>
+        </SearchWithin>
+        <Switch isSelected>Dogs!</Switch>
+        <TextField
+          label="A text field"
+          placeholder="Something"
+          marginTop="size-100"
+          necessityIndicator="label"
+          value="dummy value" />
       </Form>
     </Provider>
   );
diff --git a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
index 7a19a6dfe84..b02938eaada 100644
--- a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
+++ b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
@@ -103,4 +103,3 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
  */
 const _SearchWithin = React.forwardRef(SearchWithin);
 export {_SearchWithin as SearchWithin};
-