CountrySelect - Admin Components

Note: This component is available since Medusa v2.21.0.

The CountrySelect component is a Combobox pre-populated with countries, where the value of a country is its lowercased ISO 2 code. The Medusa Admin uses it in address and shipping forms.

Code
import { CountrySelect } from "@medusajs/dashboard/components"

Example#

Use CountrySelect as the control of a Form field, as shown in the Forms guide:

Code
import {
  CountrySelect,
  Form,
} from "@medusajs/dashboard/components"

const CountryField = ({ control }) => {
  return (
    <Form.Field
      control={control}
      name="country_code"
      render={({ field }) => (
        <Form.Item>
          <Form.Label>Country</Form.Label>
          <Form.Control>
            <CountrySelect
              autoComplete="country_code"
              {...field}
            />
          </Form.Control>
          <Form.ErrorMessage />
        </Form.Item>
      )}
    />
  )
}

The field's value is the country's ISO 2 code in lowercase, such as us, which is the format that the MedusaGo backend expects.

Props#

CountrySelect accepts the same props as Combobox, except for options, since it populates the countries itself. It also accepts the following props:

valuestringOptional

The selected country's ISO 2 code in lowercase.

onChange(value: string | undefined) => voidOptional

The function to execute when the user selects a country. It receives the country's ISO 2 code in lowercase.

defaultValuestringOptional

The ISO 2 code of the country to select by default.

placeholderstringOptional

The placeholder to show when the user hasn't selected a country. Defaults to a localized "Select country" text.

allowClearbooleanOptional

Whether to show a button that clears the selected country.

Found a problem with this page?Report Issue

Edited Nov 14·Edit this page