docs: update select examples (#2562)

* docs: update select examples

* chore: update examples

packages/components/forms/examples/SelectSizes.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Select, SectionHeading, Stack } from '@contentful/f36-components';
+
+export default function SelectSizes() {
+  return (
+    <Stack>
+      <SectionHeading>Size Medium</SectionHeading>
+      <Select
+        id="optionSelect-medium"
+        name="optionSelect-medium"
+        defaultValue="optionTwo"
+      >
+        <Select.Option value="optionOne">Option 1</Select.Option>
+        <Select.Option value="optionTwo">Option 2</Select.Option>
+        <Select.Option value="optionThree" isDisabled>
+          Disabled option
+        </Select.Option>
+      </Select>
+      <SectionHeading>Size Small</SectionHeading>
+      <Select
+        id="optionSelect-small"
+        name="optionSelect-small"
+        size="small"
+        defaultValue="optionTwo"
+      >
+        <Select.Option value="optionOne">Option 1</Select.Option>
+        <Select.Option value="optionTwo">Option 2</Select.Option>
+        <Select.Option value="optionThree" isDisabled>
+          Disabled option
+        </Select.Option>
+      </Select>
+    </Stack>
+  );
+}

packages/components/forms/examples/SelectWithLabelExample.tsx

@@ -9,6 +9,7 @@ export default function SelectWithLabelExample() {
         <Select.Option value="optionOne">Option 1</Select.Option>
         <Select.Option value="optionTwo">Long Option 2</Select.Option>
       </Select>
+      <FormControl.HelpText>Select one of the options</FormControl.HelpText>
     </FormControl>
   );
 }

packages/components/forms/src/Select/README.mdx

@@ -65,6 +65,12 @@ There might be cases where you would need to include the help text or validation
 
 ```
 
+### Select available sizes
+
+```tsx file=../../examples/SelectSizes.tsx
+
+```
+
 ### Select disabled state
 
 ```tsx file=../../examples/SelectDisabledExample.tsx