Select
A common form component for choosing a predefined value in a dropdown menu.
<script lang="ts">
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "coss-svelte";
const items = [
{ label: "Next.js", value: "next" },
{ label: "Vite", value: "vite" },
{ label: "Astro", value: "astro" },
];
</script>
<Select value="next" options={items}>
<SelectTrigger aria-label="Select framework"><SelectValue /></SelectTrigger>
<SelectPopup>
{#each items as item}
<SelectItem value={item.value} label={item.label}>{item.label}</SelectItem>
{/each}
</SelectPopup>
</Select>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Select, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport } from "coss-svelte";Anatomy
- Select
- SelectGroup
- SelectGroupLabel
- SelectItem
- SelectPopup
- SelectScrollDownButton
- SelectScrollUpButton
- SelectTrigger
- SelectValue
- SelectViewport
API Reference
Select
A common form component for choosing a predefined value in a dropdown menu.
Signatures
{ type?: "single"; value?: string; onValueChange?: OnChangeFn<string> }{ type: "multiple"; value?: string[]; onValueChange?: OnChangeFn<string[]> }| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Behavior, selection, or HTML type passed to the underlying control. |
bind:value | string | string[] | "" | Current value for the component. Bind with `bind:value` when supported. |
bind:open | boolean | false | Open state for the popup or disclosure. Bind with `bind:open`. |
options | Option[] | [] | Options rendered by the component's built-in fallback composition. |
placeholder | string | "Select" | Placeholder text shown by the built-in input. |
children : Snippet<[]>Inherits from Bits UI Select.Root and Bits UI Select.Trigger.
SelectGroup
Groups related items inside the parent component.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Group.
SelectGroupLabel
Labels a group of related items.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Select.GroupHeading.
SelectItem
Renders one selectable or repeated item.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Item.
SelectPopup
Renders the floating or modal surface for the parent component.
| Prop | Type | Default | Description |
|---|---|---|---|
portalProps | { disabled?: boolean; to?: PortalTarget } | {} | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Content.
SelectScrollDownButton
Renders a button-shaped control for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Select.ScrollDownButton.
SelectScrollUpButton
Renders a button-shaped control for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Select.ScrollUpButton.
SelectTrigger
Renders the control that opens, closes, or selects related content.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Trigger.
SelectValue
Renders the current value for the parent component.
children : Snippet<[SelectValueSnippetProps]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Value.
SelectViewport
Wraps the scrollable viewport for the parent component.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Select.Viewport.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Selection & Input
- Particles
- 23