# 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