Select

import Select from 'frui/fields/Select';

Copy

Props

The following props are accepted by Select.

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	Option[]	Yes	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 a Select field.

Select Option

<Select className="w-full z-40 text-black" options={{ foo: 'Foo', bar: 'Bar' }} placeholder="Select Option" searchable />

Copy

You can also express options as an array of objects.

<Select 
  className="w-full z-20 text-black" 
  options={[
    { label: 'Foo', value: 'foo', keyword: 'foo' },
    { label: 'Bar', value: 'bar', keyword: 'bar' }
  ]}
/>

Copy

With array options, you can use React on labels.

Choose an Option

<Select 
  className="w-full z-30 text-black" 
  options={[
    { 
      label: (<strong className="font-bold">Foo</strong>), 
      value: 'foo', 
      keyword: 'foo' 
    },
    { 
      label: (<strong className="font-bold">Bar</strong>), 
      value: 'bar', 
      keyword: 'bar' 
    }
  ]}
/>

Copy

Events

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

Choose an Option

<Select 
  className="w-full z-30 text-black" 
  options={{ foo: 'Foo', bar: 'Bar' }}
  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	`{ label: 'Foo', value: 'foo', keyword: 'foo' }`

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	string	`foo`

Errors

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

Choose an Option

<Select options={{ foo: 'Foo', bar: 'Bar' }} 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.

Radio

Slug