From 9182c421828f5d019152c197258a88bdf767d1f1 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Sun, 9 Jan 2022 02:18:38 -0600
Subject: [PATCH] select menu guide

---
 packages/docs/src/guides/select-menu.md | 63 ++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/guides/select-menu.md b/packages/docs/src/guides/select-menu.md
index 2510b41..28eed1a 100644
--- a/packages/docs/src/guides/select-menu.md
+++ b/packages/docs/src/guides/select-menu.md
@@ -6,4 +6,65 @@ description: Using select menu components
 
 # Select Menus
 
-todo
+To create a select menu, use the `Select` component, and pass a list of `Option` components as children. Use the `value` prop to set a currently selected value. You can respond to changes in the value via `onChangeValue`.
+
+```jsx
+export function FruitSelect({ onConfirm }) {
+  const [value, setValue] = useState()
+
+  return (
+    <>
+      <Select
+        placeholder="choose a fruit"
+        value={value}
+        onChangeValue={setValue}
+      >
+        <Option value="🍎" />
+        <Option value="🍌" />
+        <Option value="🍒" />
+      </Select>
+      <Button
+        label="confirm"
+        disabled={value == undefined}
+        onClick={() => {
+          if (value) onConfirm(value)
+        }}
+      />
+    </>
+  )
+}
+```
+
+```jsx
+const instance = reacord.send(
+  channelId,
+  <FruitSelect
+    onConfirm={(value) => {
+      instance.render(`you chose ${value}`)
+      instance.deactivate()
+    }}
+  />,
+)
+```
+
+For a multi-select, use the `multiple` prop, then you can use `values` and `onChangeMultiple` to handle multiple values.
+
+```tsx
+export function FruitSelect({ onConfirm }) {
+  const [values, setValues] = useState([])
+
+  return (
+    <Select
+      placeholder="choose a fruit"
+      values={values}
+      onChangeMultiple={setValues}
+    >
+      <Option value="🍎" />
+      <Option value="🍌" />
+      <Option value="🍒" />
+    </Select>
+  )
+}
+```
+
+The Select component accepts a variety of props beyond what's shown here. See the [API reference](/api) for more information.