Combo box

About this example

SvComboBox in Svelte 5 as a form field: type to filter a grouped, portalled list where the value must come from the list, so unmatched text reverts on blur. Shown as a currency picker with a label, a clear button and required validation, on the shared editor contract.

SvComboBox - a production form field: type to filter a grouped, portalled list; the value must come from the list (unmatched text reverts on blur). Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

What happens if the user types something not in the list?

On blur the text reverts to the current value, or clears if there is none, so the field never reports a value outside its options.

How is the list filtered?

Case-insensitively on the label as you type, keeping group headings for groups that still have matches; arrow keys move through the matches and Enter picks.

Can options load from a server?

Yes. Pass loadOptions instead of options for a debounced remote search, which the remote combo box demo shows.

Related documentation

• SvComboBox

Related articles

• Stable Row Identity in SvGrid (and why it matters) - How SvGrid tracks rows across mutations, why object reference stability is the key to correct selection and editing, and the exact patterns to use with live data feeds.
• A Fill Handle (Drag to Fill) in SvGrid - Build a working spreadsheet-style fill handle on top of SvGrid's cell selection and editing - pointer tracking, range highlighting, series fill, and undo/redo integration all covered.
• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.

Source code (313-combobox.svelte)

<script lang="ts">
  /**
   * SvComboBox - a production form field: type to filter a grouped, portalled
   * list; the value must come from the list (unmatched text reverts on blur).
   * Copy-paste ready.
   */
  import { SvComboBox } from '@svgrid/grid'
  import type { ListOption } from '@svgrid/grid'

  const currencies: ListOption[] = [
    { value: 'usd', label: 'USD - US Dollar', group: 'Americas' },
    { value: 'cad', label: 'CAD - Canadian Dollar', group: 'Americas' },
    { value: 'brl', label: 'BRL - Brazilian Real', group: 'Americas' },
    { value: 'eur', label: 'EUR - Euro', group: 'Europe' },
    { value: 'gbp', label: 'GBP - British Pound', group: 'Europe' },
    { value: 'chf', label: 'CHF - Swiss Franc', group: 'Europe' },
    { value: 'jpy', label: 'JPY - Japanese Yen', group: 'Asia' },
    { value: 'sgd', label: 'SGD - Singapore Dollar', group: 'Asia' },
  ]
  let currency = $state<string | number | null>('eur')
  let account = $state<string | number | null>(null)
  const accountError = $derived(account == null ? 'Select an account' : undefined)
  const accounts: ListOption[] = [
    { value: 'op', label: 'Operating account' },
    { value: 'sv', label: 'Savings account' },
    { value: 'py', label: 'Payroll account' },
  ]
</script>

<div class="wrap">
  <header>
    <h2>Combo box</h2>
    <p>An editable select: type to filter a grouped list, pick a value. Great for long, known option sets in forms.</p>
  </header>

  <form class="form" onsubmit={(e) => e.preventDefault()}>
    <SvComboBox options={currencies} value={currency} label="Currency" clearable onChange={(v) => (currency = v)} />
    <SvComboBox options={accounts} value={account} label="From account" required invalid={!!accountError} error={accountError} onChange={(v) => (account = v)} />
  </form>
</div>

<style>
  .wrap { padding: 20px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .form { display: flex; flex-direction: column; gap: 16px; }
</style>

View this example on GitHub

More Selection examples

• Selection controls - List and overlay pickers: SvListBox (inline multi-select), SvDropDownList, SvComboBox (type to filter), SvAutoComplete (free text + suggestions), SvTagsInput (chips) and SvCountryInput (searchable, flags). Every popover portals out of the scroll container. Grid cell editors, standalone too.
• List box - SvListBox: an assignee picker - inline multi-select with grouped options (departments), roving keyboard + type-ahead and a live summary.
• Drop-down list - SvDropDownList: a status / priority toolbar with grouped options, type-ahead and animated portalled panels driving a live issue list.
• Autocomplete - SvAutoComplete: a free-text search field with live suggestion shortcuts (any value accepted) - city search and a filter-syntax helper.
• Resizable dropdowns - Built-in browser bounds detection - every picker panel (SvDropDownList / SvComboBox / SvAutoComplete) opens downward when there is room and flips upward automatically near the window edge. Plus a `resizable` prop that adds a bottom drag grip to the open panel (drag to grow/shrink; height sticks for the session; grip hides on an upward flip). A switch compares fixed-height vs resizable. Theme-aware (light/dark).