# Select

A common form component for choosing a predefined value in a dropdown menu.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<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>

```

## 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. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI Select.Root and Bits UI Select.Trigger](https://bits-ui.com/docs/components/select#root).

### SelectGroup

Groups related items inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Group](https://bits-ui.com/docs/components/select#group).

### SelectGroupLabel

Labels a group of related items.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.GroupHeading](https://bits-ui.com/docs/components/select#group-heading).

### SelectItem

Renders one selectable or repeated item.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Item](https://bits-ui.com/docs/components/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`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Content](https://bits-ui.com/docs/components/select#content).

### SelectScrollDownButton

Renders a button-shaped control for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.ScrollDownButton](https://bits-ui.com/docs/components/select#scroll-down-button).

### SelectScrollUpButton

Renders a button-shaped control for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.ScrollUpButton](https://bits-ui.com/docs/components/select#scroll-up-button).

### SelectTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Trigger](https://bits-ui.com/docs/components/select#trigger).

### SelectValue

Renders the current value for the parent component.

**Composition and refs**

- `children: Snippet<[SelectValueSnippetProps]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Value](https://bits-ui.com/docs/components/select#value).

### SelectViewport

Wraps the scrollable viewport for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Select.Viewport](https://bits-ui.com/docs/components/select#viewport).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Selection & Input |
| Particles | 23 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/select.json` for the complete local file and dependency closure.
- Select is stable in the current source catalog.