Component

Location Selector

Paired country and language selects with built-in option lists and accessible labels. Uses the headless @refraction-ui/location-selector core.

Basic

Renders country and language selects side by side with sensible defaults.

Country

Language

Installation

$pnpm add @refraction-ui/react-location-selector

Usage

tsx

import { LocationSelector } from '@refraction-ui/react-location-selector'

export function MyComponent() {
  return (
    <LocationSelector
      defaultCountry="US"
      defaultLanguage="en"
      onCountryChange={(c) => console.log('country', c)}
      onLanguageChange={(l) => console.log('language', l)}
    />
  )
}

Reacting to changes

Use the onCountryChange and onLanguageChange callbacks to react to the current selection.

Country

Language

Selected: US / en

Props

Prop	Type	Default	Description
`defaultCountry`	`string`	`'US'`	Initially selected country code.
`defaultLanguage`	`string`	`'en'`	Initially selected language code.
`onCountryChange`	`(country: string) => void`	--	Called with the new country code whenever the country selection changes.
`onLanguageChange`	`(language: string) => void`	--	Called with the new language code whenever the language selection changes.
`className`	`string`	--	Additional CSS classes applied to the wrapper.