landvelger - www.nav.no

Country Select

This is the standard select component with default options. You can set locale to either 'en' (English) or 'nb' (Norsk bokmål - default)

Choose language

Toggle multiple select

Choose flag type

Toggle menuCloseOnSelect

Standard country select

Select...

<CountrySelect 
  label='Standard country select'
  ariaLabel='Standard country select'
  lang='en' 
  isMulti='false' 
  menuCloseOnSelect='false' 
  flagType='original' 
  onOptionSelected={(country) => window.alert('You selected ' + JSON.stringify(country))}
/>

Country Select with error message

In case you want to make the component mandatory, you can set an error message in the same style as the NAV designsystem components

Country select with error message

Select...

Please choose a country

<CountrySelect 
  label='Country select with error message'
  ariaLabel='Country select with error message'
  error='Please choose a country'
/>

Country Select with include and exclude lists

You can either add an include list (to set a list of selectable countries), anexclude list (to set all countries except a given list), or both lists(that is, an exclude filter over the include list)

In the below example, the select options include all European Union countries that are not Nordic countries.

Country select with include / exclude list

Select...

<CountrySelect 
  label='Country select with include / exclude list'
  ariaLabel='Country select with include / exclude list'
  includeList={CountryFilter.EU}
  excludeList={CountryFilter.NORDIC}
/>

Country Select with no flags

You can remove flag displays from the select options and current select value

Country select without flags

Select...

<CountrySelect 
  label='Country select without flags'
  ariaLabel='Country select without flags'
  flags={false}
/>

Options sorting

Sort property can be one of types asc, descor scandinaviaFirst.

asc and desc does alphabetically sort using country labels.

scandinaviaFirst puts Scandinavian countries on top of the list first.

Sort value

Country select with sorting option

Select...

<CountrySelect 
  label='Country select with sorting option'
  ariaLabel='Country select with sorting option'
  sort='scandinaviaFirst'
/>

Currency Select

You can have a currency select instead of a country select, by changing thetype property to currency

Currency select

Select...

<CountrySelect 
  label='Currency select'
  ariaLabel='Currency select'
  type='currency'
/>

Component import

import CountrySelect from 'landvelger'

React props

Property	Type	Required	Description	Default
ariaLabel	`string`	false	ARIA label	-
className	`string`	false	Additional classnames	-
closeMenuOnSelect	`boolean`	false	Should the menu close when a counrty is selected (allowing multiple selects in one go)	false
error	`string`	false	If given, shows an error messagein NAV designsystem style	-
excludeList	`list`	false	List of countries to be excluded from the option list	-
flags	`boolean`	false	Display flags on select options and selected value	true
flagType	`string`	false	Display flags on either original or circular format	original
id	`string`	false	Element ID to be passed down to options list	-
includeList	`list`	false	List of countries chosen to be options	-
isMulti	`boolean`	false	Toggle between selecting only one items, or multiple items	false
label	`node`, `string`	true	Element's label	-
locale	`string`	false	Locale of the select elements. Allowed values are `en` (English) and `nb` (Norsk Bokmål)	nb
onOptionSelected	`function`	false	Function to be called with the selected option	-
placeholder	`string`	false	Placeholder text to display when the select box is empty	-
sort	`string`	false	Sorting country options. Property can be one of types: `asc`, for ascending order `desc`, for descending order `scandinaviaFirst`, for scandinavian countries on top	scandinaviaFirst
type	`string`	false	Toggles between county select and currency select. Allowed values are `country` and `currency`	country
value	`string`	false	Initial selected value (must be a two-letter country code, as in 'NO') - case insensitive	-