From 956b316009cbcc6b102f7c0eeccecce0a7bc57ab Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 29 Oct 2020 17:43:08 -0700
Subject: [PATCH] docs(multi-select): add examples for initial selected items,
 format display text

---
 docs/src/pages/components/MultiSelect.svx | 29 +++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index e7274294..85a429c7 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -10,7 +10,7 @@ By default, items will be ordered alphabetically based on the `item.text` value.
 <MultiSelect titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
     {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
+    {id: "2", text: "Fax"}]}"
   />
 
 ### No alphabetical ordering
@@ -20,7 +20,32 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
 <MultiSelect titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
     {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}" selectedIds="{["0", "1"]}"
+    {id: "2", text: "Fax"}]}" 
+    sortItem="{() => {}}"
+  />
+
+### Initial selected items
+
+To select (or bind) items, pass an array of item ids to `selectedIds`.
+
+<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}" 
+  />
+
+
+
+### Format item display text
+
+Use the `itemToString` prop to format the display of individual items.
+
+<MultiSelect itemToString={item => {
+  return item.text + ' (' + item.id +')'
+}} titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
     sortItem="{() => {}}"
   />