# Listbox Accessible listbox for single and multi selection. ```svelte Select a food {#each collection.items as item (item.value)} {item.label} {/each} ``` ## Groups Organize items into categorized groups. ```svelte {#each collection.group() as [type, items] (type)} {type} {#each items as item (item.value)} {item.label} {/each} {/each} ``` ## Multiple Set the `multiple` proper to allow selecting more than one item. ```svelte {#each collection.items as item (item.value)} {item.label} {/each} ``` ## Disabled Set the `disabled` prop to enable the disabled state. ```svelte {#each collection.items as item (item.value)} {item.label} {/each} ``` Which can also be enabled per item. ```svelte {#each collection.items as item (item.value)} {item.label} {/each} ``` ## Search Utilize the `Input` component to implement simple search. ```svelte Search for Food (query = e.currentTarget.value)} /> {#each collection.items as item (item.value)} {item.label} {/each} ``` ## Direction Set the text direction (`ltr` or `rtl`) using the `dir` prop. ```svelte Select a food {#each collection.items as item (item.value)} {item.label} {/each} ``` ## Anatomy Here's an overview of how the Listbox component is structured in code: ```svelte ``` ## API Reference ### Root | Prop | Description | Type | Default | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | orientation | The orientation of the listbox. | "horizontal" \| "vertical" \| undefined | "vertical" | | collection | The item collection | ListCollection\ \| GridCollection\ | - | | ids | The ids of the elements in the listbox. Useful for composition. | Partial\<\{ root: string; content: string; label: string; item: (id: string \| number) => string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }> \| undefined | - | | disabled | Whether the listbox is disabled | boolean \| undefined | - | | disallowSelectAll | Whether to disallow selecting all items when \`meta+a\` is pressed | boolean \| undefined | - | | onHighlightChange | The callback fired when the highlighted item changes. | ((details: HighlightChangeDetails\) => void) \| undefined | - | | onValueChange | The callback fired when the selected item changes. | ((details: ValueChangeDetails\) => void) \| undefined | - | | value | The controlled keys of the selected items | string\[] \| undefined | - | | defaultValue | The initial default value of the listbox when rendered. Use when you don't need to control the value of the listbox. | string\[] \| undefined | \[] | | highlightedValue | The controlled key of the highlighted item | string \| null \| undefined | - | | defaultHighlightedValue | The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the listbox. | string \| null \| undefined | - | | loopFocus | Whether to loop the keyboard navigation through the options | boolean \| undefined | false | | selectionMode | How multiple selection should behave in the listbox. - \`single\`: The user can select a single item. - \`multiple\`: The user can select multiple items without using modifier keys. - \`extended\`: The user can select multiple items by using modifier keys. | SelectionMode \| undefined | "single" | | scrollToIndexFn | Function to scroll to a specific index | ((details: ScrollToIndexDetails) => void) \| undefined | - | | selectOnHighlight | Whether to select the item when it is highlighted | boolean \| undefined | - | | deselectable | Whether to disallow empty selection | boolean \| undefined | - | | typeahead | Whether to enable typeahead on the listbox | boolean \| undefined | - | | onSelect | Function called when an item is selected | ((details: SelectionDetails) => void) \| undefined | - | | dir | The document's text/writing direction. | "ltr" \| "rtl" \| undefined | "ltr" | | getRootNode | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => ShadowRoot \| Node \| Document) \| undefined | - | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### Provider | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | value | - | () => ListboxApi\ | - | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### Context | Prop | Description | Type | Default | | -------- | ----------- | ---------------------------------------------- | ------- | | children | - | Snippet\<\[() => ListboxApi\]> | - | ### Label | Prop | Description | Type | Default | | ------- | --------------------------- | -------------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | - | ### Input | Prop | Description | Type | Default | | ------- | --------------------------- | -------------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | - | ### Content | Prop | Description | Type | Default | | ------- | --------------------------- | ----------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"ul">]> \| undefined | - | ### ItemGroup | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### ItemGroupLabel | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### Item | Prop | Description | Type | Default | | ---------------- | -------------------------------------- | ----------------------------------------------- | ------- | | item | The item to render | any | - | | highlightOnHover | Whether to highlight the item on hover | boolean \| undefined | - | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"li">]> \| undefined | - | ### ItemText | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | - | ### ItemIndicator | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"span">]> \| undefined | - |