- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function Default() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
return (
<Listbox className="w-full max-w-md" collection={collection}>
<Listbox.Label>Select a food</Listbox.Label>
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
</script>
<Listbox class="w-full max-w-md" {collection}>
<Listbox.Label>Select a food</Listbox.Label>
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Groups
Organize items into categorized groups.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
Fruits
Vegetables
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple', type: 'Fruits' },
{ label: 'Banana', value: 'banana', type: 'Fruits' },
{ label: 'Orange', value: 'orange', type: 'Fruits' },
{ label: 'Carrot', value: 'carrot', type: 'Vegetables' },
{ label: 'Broccoli', value: 'broccoli', type: 'Vegetables' },
{ label: 'Spinach', value: 'spinach', type: 'Vegetables' },
];
export default function Group() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
groupBy: (item) => item.type,
});
return (
<Listbox className="w-full max-w-md" collection={collection}>
<Listbox.Content>
{collection.group().map(([type, items]) => (
<Listbox.ItemGroup key={type}>
<Listbox.ItemGroupLabel>{type}</Listbox.ItemGroupLabel>
{items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.ItemGroup>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
Fruits
Vegetables
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple', type: 'Fruits' },
{ label: 'Banana', value: 'banana', type: 'Fruits' },
{ label: 'Orange', value: 'orange', type: 'Fruits' },
{ label: 'Carrot', value: 'carrot', type: 'Vegetables' },
{ label: 'Broccoli', value: 'broccoli', type: 'Vegetables' },
{ label: 'Spinach', value: 'spinach', type: 'Vegetables' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
groupBy: (item) => item.type,
});
</script>
<Listbox class="w-full max-w-md" {collection}>
<Listbox.Content>
{#each collection.group() as [type, items] (type)}
<Listbox.ItemGroup>
<Listbox.ItemGroupLabel>{type}</Listbox.ItemGroupLabel>
{#each items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.ItemGroup>
{/each}
</Listbox.Content>
</Listbox>Multiple
Set the multiple proper to allow selecting more than one item.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function Multiple() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
return (
<Listbox className="w-full max-w-md" collection={collection} selectionMode="multiple">
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
</script>
<Listbox class="w-full max-w-md" {collection} selectionMode="multiple">
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Disabled
Set the disabled prop to enable the disabled state.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function Disabled() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
return (
<Listbox className="w-full max-w-md" collection={collection} disabled={true}>
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
</script>
<Listbox class="w-full max-w-md" {collection} disabled={true}>
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Which can also be enabled per item.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function DisabledItem() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
isItemDisabled: (item) => item.value === 'banana',
});
return (
<Listbox className="w-full max-w-md" collection={collection}>
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
isItemDisabled: (item) => item.value === 'banana',
});
</script>
<Listbox class="w-full max-w-md" {collection}>
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Search
Utilize the Input component to implement simple search.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
import { useMemo, useState } from 'react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function Search() {
const [query, setQuery] = useState('');
const collection = useMemo(() => {
const items = data.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
return useListCollection({ items });
}, [query]);
return (
<Listbox className="w-full max-w-md" collection={collection}>
<Listbox.Label>Search for Food</Listbox.Label>
<Listbox.Input placeholder="Type to search..." value={query} onInput={(e) => setQuery(e.currentTarget.value)} />
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
let query = $state('');
const collection = $derived(
useListCollection({
items: data.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())),
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
}),
);
</script>
<Listbox class="w-full max-w-md" {collection}>
<Listbox.Label>Search for Food</Listbox.Label>
<Listbox.Input placeholder="Type to search..." value={query} oninput={(e) => (query = e.currentTarget.value)} />
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Direction
Set the text direction (ltr or rtl) using the dir prop.
- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-react';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
export default function Dir() {
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
return (
<Listbox className="w-full max-w-md" collection={collection} dir="rtl">
<Listbox.Label>Select a food</Listbox.Label>
<Listbox.Content>
{collection.items.map((item) => (
<Listbox.Item key={item.value} item={item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox>
);
}- Apple
- Banana
- Orange
- Carrot
- Broccoli
- Spinach
<script lang="ts">
import { Listbox, useListCollection } from '@skeletonlabs/skeleton-svelte';
const data = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
{ label: 'Carrot', value: 'carrot' },
{ label: 'Broccoli', value: 'broccoli' },
{ label: 'Spinach', value: 'spinach' },
];
const collection = useListCollection({
items: data,
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
});
</script>
<Listbox class="w-full max-w-md" {collection} dir="rtl">
<Listbox.Label>Select a food</Listbox.Label>
<Listbox.Content>
{#each collection.items as item (item.value)}
<Listbox.Item {item}>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
{/each}
</Listbox.Content>
</Listbox>Anatomy
Here’s an overview of how the Listbox component is structured in code:
import { Listbox } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<Listbox>
<Listbox.Label />
<Listbox.Content>
<Listbox.Item>
<Listbox.ItemText />
<Listbox.ItemIndicator />
</Listbox.Item>
</Listbox.Content>
</Listbox>
);
}<script lang="ts">
import { Listbox } from '@skeletonlabs/skeleton-svelte';
</script>
<Listbox>
<Listbox.Label />
<Listbox.Content>
<Listbox.Item>
<Listbox.ItemText />
<Listbox.ItemIndicator />
</Listbox.Item>
</Listbox.Content>
</Listbox>API Reference
Unable to load component information for react/listbox
Unable to load component information for svelte/listbox