Combobox

A searchable single choice for long lists.

Market

combobox.example.svelte

<script lang="ts">
  import { Combobox } from '@onlywin/ui-svelte';

  const countries = [
    { label: 'Austria', value: 'AT' },
    { label: 'Brazil', value: 'BR' },
    { label: 'Canada', value: 'CA' },
    { label: 'Germany', value: 'DE' },
    { label: 'Malta', value: 'MT' },
    { label: 'Sweden', value: 'SE' },
    { label: 'Türkiye', value: 'TR' },
  ];

  let country = $state<string | null>(null);
</script>

<div class="example-grid">
  <Combobox
    label="Market"
    options={countries}
    bind:value={country}
    placeholder="Type a country"
  />
</div>

Usage

Do

Use it for long lists: countries, currencies, games.
Matching ignores case and accents.

Don’t

Do not use it for free text; use Input.

Accessibility

An input with the combobox role, aria-autocomplete="list" and a listbox of matches.
The number of matches is announced politely as the reader types.

Keyboard

Combobox keyboard interactions
Keys	Action
`Type`	Filter
`Arrow Down, Arrow Up`	Move through matches
`Enter`	Choose
`Escape`	Close, then clear

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Combobox props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`emptyText`	`string`	—	Shown when nothing matches; default "No matches".
`error`	`string`	—
`hint`	`string`	—
`label` *required	`string`	—
`name`	`string`	—
`onQueryChange`	`(query: string) => void`	—
`onValueChange`	`(value: string \| null) => void`	—
`optional`	`boolean`	`false`
`options` *required	`ReadonlyArray<IUiOption>`	—
`placeholder`	`string`	—
`value`	`string \| null`	`null`	Bindable in Svelte; `defaultValue` in React.