Country input

What this example shows

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

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

Related documentation

• SvCountryInput

Related articles

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

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.