diff --git a/sites/docs/content/components/listbox.md b/sites/docs/content/components/listbox.md index b218b1f89..e6f9ab0c7 100644 --- a/sites/docs/content/components/listbox.md +++ b/sites/docs/content/components/listbox.md @@ -4,7 +4,7 @@ description: A list of options that can be selected by the user. --- @@ -322,6 +322,30 @@ For more in-depth information on controlled components and advanced state manage +## Multiple Selection + +The `type` prop can be set to `'multiple'` to allow multiple items to be selected at a time. + +```svelte + + + + + +``` + + + +{#snippet preview()} + +{/snippet} + + + ## Opt-out of Floating UI When you use the `Listbox.Content` component, Bits UI uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger, similar to other popover-like components. diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts index 8a7eca071..44728440b 100644 --- a/sites/docs/src/lib/components/demos/index.ts +++ b/sites/docs/src/lib/components/demos/index.ts @@ -27,6 +27,7 @@ export { default as LinkPreviewDemo } from "./link-preview-demo.svelte"; export { default as ListboxDemo } from "./listbox-demo.svelte"; export { default as ListboxDemoCustom } from "./listbox-demo-custom.svelte"; export { default as ListboxDemoCustomAnchor } from "./listbox-demo-custom-anchor.svelte"; +export { default as ListboxDemoMultiple } from "./listbox-demo-multiple.svelte"; export { default as MenubarDemo } from "./menubar-demo.svelte"; export { default as NavigationMenuDemo } from "./navigation-menu-demo.svelte"; export { default as PaginationDemo } from "./pagination-demo.svelte"; diff --git a/sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte b/sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte new file mode 100644 index 000000000..ce4b622b0 --- /dev/null +++ b/sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte @@ -0,0 +1,83 @@ + + + + + + {selectedLabel} + + + + + + + + + {#each themes as theme, i (i + theme.value)} + + {#snippet children({ selected })} + {theme.label} + {#if selected} +
+ +
+ {/if} + {/snippet} +
+ {/each} +
+ + + +
+
+