Country

import Country from 'frui/fields/Country';

Copy

Props

The following props are accepted by Country.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string	No	Alias to value
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onDropdown	Function	No	Event handler when dropdown opens/closes
onSelected	Function	No	Event handler when an option has been selected
onUpdate	Function	No	Update event handler
options	string[]	No	List of select options.
placeholder	string	No	Display text when no value set
searchable	boolean	No	Add a search field
style	CSS Object	No	Standard CSS object
value	string	No	Selected value from the options

Basics

The following is a basic example of an Country field.

Select Country

<Country className="w-full z-30 text-black" placeholder="Select Country" searchable />

Copy

Events

The following example makes use of all the possible events for Country.

Choose a Country

<Country 
  className="w-full z-20 text-black" 
  onDropdown={open => console.log('dropdown', open)}
  onSelected={option => console.log('selected', option)}
  onUpdate={value => alert(JSON.stringify(value))}
/>

Copy

On Dropdown

The onDropdown event is triggered when the dropdown opens or closes. The following arguments are passed to the event handler:

Name	Type	Sample
open	boolean	`true`

On Selected

The onSelected event is triggered when an option has been selected. The following arguments are passed to the event handler:

Name Type Sample

option

SelectOption

Name	Type	Sample
option	SelectOption	`{ label: 'United States', value: { countryCode: 'US', countryName: 'United States', currencyType: 'fiat', currencyCode: 'USD', currencyName: 'US Dollar', currencyPlural: 'US Dollars', currencySymbol: '$', language: 'en' } }`

{
  label: 'United States',
  value: {
    countryCode: 'US',
    countryName: 'United States',
    currencyType: 'fiat',
    currencyCode: 'USD',
    currencyName: 'US Dollar',
    currencyPlural: 'US Dollars',
    currencySymbol: '$',
    language: 'en'
  }
}

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	CountryData	`{ countryCode: 'US', countryName: 'United States', currencyType: 'fiat', currencyCode: 'USD', currencyName: 'US Dollar', currencyPlural: 'US Dollars', currencySymbol: '$', language: 'en' }`

Errors

You can pass the error prop to highlight the Country field red.

Choose a Country

<Country className="w-full z-10 text-black" error={string|true} value="US" />

Copy

Custom Styles

You can add your own custom class to selects or use any of the respective frui-field-select, frui-field-select-control, frui-field-select-placeholder, frui-field-select-dropdown, frui-field-select-search, frui-field-select-search-control, frui-field-select-search-icon, frui-field-select-options, frui-field-select-option, and frui-field-select-label CSS classes.

Color Picker

Currency