SvCountryInput

A searchable country picker showing a flag, name, and dial code. It emits the ISO 3166-1 alpha-2 code, so your model stores a stable 'US' / 'GB' rather than a display string.

SvCountryInput is the ready-made country field for checkout, profile, and phone forms. Opening the trigger reveals a portalled panel with a search box and a flag-and-name list; typing filters instantly. It is controlled through value + onChange, can show the dial code (in the list, and beside the selected country with showDial), and localizes its search and empty-state strings via messages. Colors follow the grid's --sg-* tokens.

Basic usage

<script lang="ts">
  import { SvCountryInput } from '@svgrid/grid'
  let value = $state<string | null>(null)
</script>

<SvCountryInput label="Country" {value} onChange={(code) => (value = code)} required />

Props

Prop Type Default Description
value string | null null The selected ISO 3166-1 alpha-2 code (e.g. 'US').
onChange (code: string) => void - Fires with the newly picked country code.
showDial boolean false Show the dial code beside the selected country.
placeholder string 'Select country…' Trigger text when nothing is selected.
messages Partial<CountryMessages> - Override the search / noResults strings.
size sm | md | lg md Control height and font size.
disabled boolean false Blocks interaction.
label string - Visible field label, wired to the control.
hint string - Helper text under the control.
error string - Error message; announced and styled when set.
required boolean false Marks the field required.
invalid boolean false Applies the invalid state.
name string - Emits a hidden input carrying the code for form posts.
dir ltr | rtl | auto auto Text direction.
ariaLabel string - Accessible name when there is no visible label.
id string - Root id; label/hint/error ids derive from it.

CountryMessages is { search: string; noResults: string }.

Patterns

Show dial codes

Turn on showDial for phone-number forms, so the selected country carries its + prefix (the panel list always shows dial codes):

<SvCountryInput label="Phone country" showDial {value} onChange={(c) => (value = c)} />

Localized strings

Override the search placeholder and empty-state text through messages:

<SvCountryInput {value} onChange={(c) => (value = c)}
  messages={{ search: 'Land suchen', noResults: 'Keine Treffer' }} />

Required in a form

Because it emits a stable ISO code, validation is a simple presence check:

<SvCountryInput label="Country" required
  {value} onChange={(c) => (value = c)}
  invalid={submitted && !value} error={!value ? 'Required' : undefined} />

React to the picked country

The emitted ISO code is a stable key, so drive dependent state off it - preset a currency or locale, or reset a region field when the country changes:

<script lang="ts">
  import { SvCountryInput } from '@svgrid/grid'
  let country = $state<string | null>(null)
  const currency = $derived(
    country === 'US' ? 'USD' : country === 'GB' ? 'GBP' : country ? 'EUR' : '',
  )
</script>

<SvCountryInput label="Country" value={country}
  onChange={(code) => (country = code)} />
<p>Billing currency: {currency || '-'}</p>

Tip: the panel search matches on country name, dial code, and ISO code, so users can jump to a country by typing a + prefix or a two-letter code, not just the name.

Accessibility

See also