Country input

About this example

SvCountryInput in Svelte 5 as a checkout field: a searchable country picker showing flag, name and, with showDial, the dial code, emitting the ISO country code through onChange, with a label and required validation on the shared editor contract.

SvCountryInput - a production checkout field: a searchable country picker (flag + name + optional dial code) emitting the ISO code. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

What value is stored?

The two-letter ISO code, for example DE, which is what payment and shipping APIs expect. The display shows the flag and localized name.

How is the list searched?

Typing filters by country name, dial code and ISO code, so +49, DE and Germany all find the same entry.

Can I translate the strings?

Yes. The messages prop overrides the placeholder, the search label and the empty-result text, and the country names come from the built-in reference list.

Related documentation

• SvCountryInput

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.
• SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.

Source code (317-country-input.svelte)

<script lang="ts">
  /**
   * SvCountryInput - a production checkout field: a searchable country picker
   * (flag + name + optional dial code) emitting the ISO code. Copy-paste ready.
   */
  import { SvCountryInput } from '@svgrid/grid'

  let country = $state<string | null>('US')
  let billing = $state<string | null>(null)
  const billingError = $derived(billing == null ? 'Select a billing country' : undefined)
</script>

<div class="wrap">
  <header>
    <h2>Country input</h2>
    <p>A searchable country picker (search by name, dial code or ISO) emitting the alpha-2 code - checkout, profiles, phone defaults.</p>
  </header>

  <form class="form" onsubmit={(e) => e.preventDefault()}>
    <label class="f">Shipping country
      <SvCountryInput value={country} showDial onChange={(v) => (country = v)} />
      <span class="val">ISO: {country ?? '-'}</span>
    </label>

    <SvCountryInput
      value={billing}
      label="Billing country"
      required
      invalid={!!billingError}
      error={billingError}
      onChange={(v) => (billing = 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: 18px; }
  .f { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
  .val { font-size: 12px; color: var(--sg-muted, #94a3b8); font-weight: 400; }
</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.
• Combo box - SvComboBox: a form field - type to filter a grouped, portalled list; the value must come from the list. With label + required validation.
• 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.