From a86aa5d3634e0faf2c42e4b7146d7f85a04ef760 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 18 Jun 2022 12:45:39 -0700
Subject: [PATCH] docs(select): adjust default example to demo usage without
 `selected` prop (#1358)

---
 docs/src/pages/components/Select.svx | 30 +++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx
index 86656661..93883b00 100644
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@@ -9,7 +9,33 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 
 ### Default
 
-<Select labelText="Carbon theme" selected="g10" >
+If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
+
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
+  <SelectItem value="white" />
+  <SelectItem value="g10" />
+  <SelectItem value="g80" />
+  <SelectItem value="g90" />
+  <SelectItem value="g100" />
+</Select>
+
+### Custom item text
+
+Use the `text` prop on `SelectItem` to customize the display value.
+
+<Select labelText="Carbon theme" on:change={e => console.log("value", e.detail)}>
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Initial selected value
+
+Use the `selected` prop to specify an initial value.
+
+<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.detail)}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g80" text="Gray 80" />
@@ -19,6 +45,8 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
 
 ### Reactive example
 
+The `selected` prop is reactive and supports two-way binding.
+
 <FileSource src="/framed/Select/SelectReactive" />
 
 ### Helper text