diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx index 563fee26..9d38c548 100644 --- a/docs/src/pages/components/MultiSelect.svx +++ b/docs/src/pages/components/MultiSelect.svx @@ -24,15 +24,30 @@ Checkbox attributes can be adjusted via the `itemToInput` prop. {id: "2", text: "Fax"}]}" /> +## Format item display text + +Use the `itemToString` prop to format the display of individual items without modifying the underlying value. + + { + 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="{() => {}}" + /> + ## Custom slot -Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. +For even more customization, use the default slot. + +Access the `item` and `index` values through the `let:` directive. ## No alphabetical ordering -To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop. +To prevent alphabetical item ordering, pass a noop function to the `sortItem` prop. -## Format item display text - -Use the `itemToString` prop to format the display of individual items. - - { - 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="{() => {}}" - /> - ## Format checkbox values Use the `itemToInput` prop to customize the user-selectable checkbox values. @@ -118,6 +122,10 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input. ## Hidden label +Set `hideLabel` to `true` to visually hide the label. + +Note that you should still specify a `label` for accessibility. +