Skip to content
bref / ui

Svelte components, simply.

Star

Select

Choose one or more labeled options by ID.

Usage

Selected: none; changes: 0

Svelte 
<script>
	import { Select } from 'bref-ui';
	let status = $state<string | undefined>();
	const items = [{ id: 'draft', label: 'Draft' }];
</script>

<label for="status">Status</label>
<Select id="status" {items} bind:value={status} />

Playground

Live preview

Selected: none; changes: 0

Settings

Appearance
Selection
Options
View generated code
Svelte 
<script lang="ts">
	import { Select } from 'bref-ui';
	import type { SelectOptionDataProps } from 'bref-ui/types';
	const items: SelectOptionDataProps[] = [
		{
			id: 'draft',
			label: 'Draft',
			icon: {
				name: 'edit',
				filled: false
			}
		},
		{
			id: 'review',
			label: 'In review',
			icon: {
				name: 'search',
				filled: false
			}
		},
		{
			id: 'archived',
			label: 'Archived',
			disabled: true
		},
		{
			id: 'published',
			label: 'Published',
			icon: {
				name: 'check_circle',
				filled: false
			}
		}
	];
	let value = $state<string | string[] | undefined>(undefined);
	let changes = $state(0);
</script>

<label for="playground-select">Choose status</label>
<Select
	id="playground-select"
	{items}
	bind:value
	size="medium"
	disabled={false}
	placeholder={'Select…'}
	emptyMessage={{ message: 'No options found', icon: { name: 'search', filled: false } }}
	onChange={() => changes++}
/>
<p role="status">Selected: {JSON.stringify(value) ?? 'none'}; changes: {changes}</p>

States and sizes

Multiple: none

Archived is disabled. The shared theme control switches light and dark modes.

Long labels and scrolling

Long labels truncate. Selected rows keep a tick; hover uses a neutral fill.

Labels and keyboard

Enter or Space opens the popup. Tab and Shift+Tab move between option buttons; Enter or Space selects. Single selection closes the popup; multiple selection keeps it open. Escape or a click outside closes it. Arrow navigation is not implemented; the scroll container is also a Tab stop.

Props

Component props
PropTypeRequiredDefaultDescription
itemsreadonly SelectOptionDataProps[]Yes—Unique IDs, labels, optional icons and disabled state.
valuestring | string[]NoundefinedBindable selected ID or IDs; an array enables multiple selection.
onChange(value: string | string[]) => voidNoOmittedCalled when a user changes selection.
idstringNoOmittedTrigger ID for label association.
placeholderstringNoSelect…Text shown for an empty selection.
emptyMessageSelectEmptyPropsNo{ message: 'No options found' }Empty results text and optional decorative icon.
sizeBaseSizeNomediumControl and option size.
disabledbooleanNofalseDisable the control and close the popup.

Labels target the trigger ID. Icons accept only name and filled. Native HTML attributes and events are not forwarded. Selection uses bind:value and onChange; an array toggles multiple IDs. Form submission and reset belong to the caller; snippets are not exposed.