docs: update select

packages/react-docs/pages/components/select/attribute-disabled.js

@@ -0,0 +1,10 @@
+import { Option, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Select disabled>
+    <Option value="">Choose an option</Option>
+  </Select>
+);
+
+export default App;

packages/react-docs/pages/components/select/attribute-required.js

@@ -0,0 +1,12 @@
+import { Option, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Select required>
+    <Option value="">Choose an option</Option>
+    <Option value="dog">Dog</Option>
+    <Option value="cat">Cat</Option>
+  </Select>
+);
+
+export default App;

packages/react-docs/pages/components/select/basic.js

@@ -0,0 +1,21 @@
+import { Option, OptionGroup, Select, TextLabel } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <>
+    <TextLabel mb="1x">Label:</TextLabel>
+    <Select>
+      <Option value="">Choose an option</Option>
+      <OptionGroup label="Category 1">
+        <Option value={1}>Option 1</Option>
+        <Option value={2}>Option 2</Option>
+      </OptionGroup>
+      <OptionGroup label="Category 2">
+        <Option value={3}>Option 3</Option>
+        <Option value={4}>Option 4</Option>
+      </OptionGroup>
+    </Select>
+  </>
+);
+
+export default App;

packages/react-docs/pages/components/select/index.page.mdx

@@ -0,0 +1,71 @@
+# Select
+
+The `Select` component is used for collecting user provided information from a list of options.
+
+## Import
+
+```js
+import {
+  Select,
+  Option,
+  OptionGroup,
+} from '@tonic-ui/react';
+```
+
+## Usage
+
+{render('./basic')}
+
+### Variants
+
+The `Select` component comes in 3 variants: `outline`, `filled`, and `unstyled`. Pass the `variant` prop and set it to either of these values.
+
+#### `outline`
+
+{render('./variant-outline')}
+
+#### `filled`
+
+{render('./variant-filled')}
+
+#### `unstyled`
+
+{render('./variant-unstyled')}
+
+### Attributes
+
+The `<select>` element has some unique attributes you can use to control it, such as `multiple` to specify whether multiple options can be selected, and `size` to specify how many options should be shown at once. It also accepts most of the general form input attributes such as `disabled`, `required`, etc.
+
+#### Multiple options
+
+{render('./multiple-options')}
+
+#### `disabled`
+
+{render('./attribute-disabled')}
+
+#### `required`
+
+{render('./attribute-required')}
+
+## Props
+
+### Select
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| disabled | boolean | | If `true`, the select is disabled and the user cannot interact with it. |
+| error | boolean | | If `true`, the select displays a red border to indicate an error. |
+| variant | string | 'outline' | The variant of the select style to use. One of: 'outline', 'filled', 'unstyled' |
+
+### Option
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |
+
+### OptionGroup
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | ReactNode | | |

packages/react-docs/pages/components/select/multiple-options.js

@@ -0,0 +1,25 @@
+import { Flex, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const FlexOption = ({ style, ...props }) => (
+  <Flex
+    as="option"
+    alignItems="center"
+    height="8x"
+    px="3x"
+    {...props}
+  />
+);
+
+const App = () => (
+  <Select multiple size="4">
+    <FlexOption value={1}>Option 1</FlexOption>
+    <FlexOption value={2}>Option 2</FlexOption>
+    <FlexOption value={3}>Option 3</FlexOption>
+    <FlexOption value={4}>Option 4</FlexOption>
+    <FlexOption value={5}>Option 5</FlexOption>
+    <FlexOption value={6}>Option 6</FlexOption>
+  </Select>
+);
+
+export default App;

packages/react-docs/pages/components/select/variant-filled.js

@@ -0,0 +1,11 @@
+import { Option, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Select variant="filled">
+    <Option value="">Choose an option</Option>
+    <Option value="filled">Filled</Option>
+  </Select>
+);
+
+export default App;

packages/react-docs/pages/components/select/variant-outline.js

@@ -0,0 +1,11 @@
+import { Option, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Select variant="outline">
+    <Option value="">Choose an option</Option>
+    <Option value="outline">Outline</Option>
+  </Select>
+);
+
+export default App;

packages/react-docs/pages/components/select/variant-unstyled.js

@@ -0,0 +1,11 @@
+import { Option, Select } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Select variant="unstyled">
+    <Option value="">Choose an option</Option>
+    <Option value="unstyled">Unstyled</Option>
+  </Select>
+);
+
+export default App;