CountrySelect - Admin Components

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
1import {2  CountrySelect,3  Form,4} from "@medusajs/dashboard/components"5
6const CountryField = ({ control }) => {7  return (8    <Form.Field9      control={control}10      name="country_code"11      render={({ field }) => (12        <Form.Item>13          <Form.Label>Country</Form.Label>14          <Form.Control>15            <CountrySelect16              autoComplete="country_code"17              {...field}18            />19          </Form.Control>20          <Form.ErrorMessage />21        </Form.Item>22      )}23    />24  )25}

The field's value is the country's ISO 2 code in lowercase, such as us, which is the format that the Medusa 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: