CountrySelect

The CountrySelect component is a form component that enables a user to select a single option from a dropdown menu as well as behaving like a standard text input with autocomplete options.

Types

The CountrySelect component supports two types:

• country (default): Displays country names for selection
• phone: Displays country phone codes (e.g., +1, +44, +49) for phone number input scenarios

Import

React

// with @dhl-official/react-library:
import { DhlCountrySelect } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlCountrySelect } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-country-select></dhl-country-select>

Vue.js

If the DUIL has been installed, you can use the web component directly:

<dhl-country-select></dhl-country-select>

By default, menu list opens below the input. If there isn't enough space left in the viewport, it automatically opens above the input instead — no configuration required.

Code

React

<DhlCountrySelect
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
/>

Angular

<duil301-dhl-country-select
  variant='{"label": "Select Country", "placeholder": "Select Country"}'
></duil301-dhl-country-select>

Vue.js

<duil301-dhl-country-select
  :variant="{
    label: 'Select Country',
    placeholder: 'Select Country',
  }"
/>

Examples

Example 1

Country Type (Default)

Code example

<DhlCountrySelect
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
/>

Example 2

Phone Code Type

Code example

<DhlCountrySelect
  type={DHL_COUNTRY_SELECT.TYPE.PHONE}
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
/>

Example 3

With specific countries only

Code example

import { DhlCountrySelect } from "@dhl-official/react-library";
import { DHL_COUNTRY_SELECT } from "@dhl-official/stencil-library";
    
<DhlCountrySelect  
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
  filteredList={[
    DHL_COUNTRY_SELECT.COUNTRY_CODES.au,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.be,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.dk,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.cz,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.de,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.es,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.it,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.hr,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.se,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.fr,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.fi,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.pl,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.nl,
    DHL_COUNTRY_SELECT.COUNTRY_CODES.pt
  ]}
/>

Example 4

Preselected via ISO code

The value prop accepts a country ISO code as defined in DHL_COUNTRY_SELECT.COUNTRY_CODES. The match is case-insensitive, so both "de" and "DE" preselect the same option.

Code example

import { DhlCountrySelect } from "@dhl-official/react-library";
import { DHL_COUNTRY_SELECT } from "@dhl-official/stencil-library";

<DhlCountrySelect
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
  value={DHL_COUNTRY_SELECT.COUNTRY_CODES.de}
/>

Example 5

Preselected via country label

The value prop also accepts the country label as displayed in the dropdown.

Code example

<DhlCountrySelect
  variant={{
    label: "Select Country",
    placeholder: "Select Country",
  }}
  value="Germany"
/>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
changeEvent	change-event	[DEPRECATED] Use dhlChange event instead An optional input onChange callback handler. Receives the country label as the first argument and the country code (e.g. "de") as the second.	(value: string, countryCode?: string) => boolean	undefined
customFilter	custom-filter	An optional callback handler that accepts the options and input data, used for custom filtering. If this function is not passed, by default, filtering will happen on the "label" key of the item if its an object or the actual value if the item is a primitive data type	(options: unknown, value: string) => DhlSelectionOptionType[]	undefined
dataAriaDescribedby	data-aria-describedby	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	string	undefined
dataAriaExpanded	data-aria-expanded	An optional prop used for assistive technology support - used to mark expandable and collapsible regions.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	undefined
dataMaskPii	data-mask-pii	An optional prop to mask sensitive data in session-replay tools. When true, sets data-di-mask on the inner element.	boolean	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
filteredList	filtered-list	An optional prop to specify array of country codes in order to have filtered list of countries. Country codes array examples: ["ar", "cz", "de", "es", "it", "au"] or [ DHL_COUNTRY_SELECT.COUNTRY_CODES.ar, DHL_COUNTRY_SELECT.COUNTRY_CODES.au, DHL_COUNTRY_SELECT.COUNTRY_CODES.es]	string[]	[]
getItemLabel	get-item-label	An optional prop used to read the label of an option.	(option: any) => void	undefined
highlightedCountries	highlighted-countries	An optional prop used to highlight specific countries with additional option metadata. Example: pass countryCodes ["ro", "de"] with description, helperText, and rightIcon metadata.	{ countryCodes: string[]; description?: string; helperText?: string; rightIcon?: string; }	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
locale	locale	An optional prop flag to define locale for country names. In case when unsupported locale will be passed, then country names will fallback to default names in English.	string	undefined
menuListPosition	menu-list-position	An optional prop controlling the menu list position. auto (the default) chooses above or below based on available viewport space; below and above keep the list fixed in the selected position.	"above" | "auto" | "below"	MENU_LIST_POSITION.AUTO
name	name	An optional value to be set to the element HTML name attribute. It takes any valid value that can be used for the name attribute of an HTMLInputElement.	string	undefined
openOnFocus	open-on-focus	An optional prop when set to true, the select option list will be shown on input focus.	boolean	false
optionClickEvent	option-click-event	[DEPRECATED] Use dhlClickOption event instead An optional callback for option click event, option is passed as callback parameter.	(option: DhlSelectionOptionType) => void	undefined
readonly	readonly	An optional flag to define if the component is readonly.	boolean	false
required	required	An optional prop to flag the component as required within a form context.	boolean	undefined
showAllOptionsAfterSelection	show-all-options-after-selection	An optional prop flag to define if options should be filtered after selection.	boolean	true
showClearButton	show-clear-button	An optional prop flag to define if clear button is displayed.	boolean	false
showPlaceholderImage	show-placeholder-image	An optional prop to define placeholder image.	boolean	false
showRightIcon	show-right-icon	An optional prop flag to define if right icon is displayed.	boolean	true
showSmallImage	show-small-image	An optional prop flag to define if small image is displayed.	boolean	true
size	size	An optional prop to define the size of the component.	"md" | "sm"	Sizes.MD
tooltip	tooltip	An optional prop to display a tooltip info icon to the left of the right icon (chevron).	{ title: string; description: string; placement?: "top" | "bottom" | "left" | "right" | "none"; isMobileVariant?: boolean; }	undefined
type	type	An optional prop to define the type of the component.	"country" | "phone"	DHL_COUNTRY_SELECT.TYPE.COUNTRY
validation	validation	An optional object to set-up a custom components validation state. Required Fields: type	{ type: "warning" | "valid" | "invalid" | "note"; message?: string; }	undefined
value	value	An optional prop defining the value of the component used to preselect an option. Accepts either: - a country ISO code as defined in DHL_COUNTRY_SELECT.COUNTRY_CODES (e.g. "de", "gb_eng") — matched case-insensitively, so "DE" works too; - the country label as displayed in the dropdown (e.g. "Germany", or the phoneCode such as "+49" when type="phone").	string	""
variant	variant	A REQUIRED object to set-up a custom components variant state. It can be used to set a custom label and a custom placeholder text. label is required. placeholder is optional. type property was removed because animated behavior of label and placeholder is no longer supported. When placeholder is not provided, then label stays permanently animated.	{ label: string; placeholder?: string; }	{ label: "Select Country", placeholder: "Select Country", }

Dependencies

Depends on

• duil301-dhl-select

Graph

---

Built by DHL User Interface Library Team!