Select

The Select select component is the basic drop down component.

Example

{
  "component": "select",
  "label": "Select field",
  "name": "my_select",
  "options": [
    { "value": "one", "label": "One" },
    { "value": "two", "label": "Two" },
    { "value": "three", "label": "Three" }
  ],
  "cleanable": true,
  "searchable": false
}

Form Scripts

All properties of the Select component can be modified at runtime using a Form Scripts, for example filling up the options of the dropdown when a field changes

{
  component: 'select',
  label: 'Country',
  name: 'country',
  options: [
    { value: 'us', label: 'United States' },
    { value: 'it', label: 'Italy' },
    { value: 'gr', label: 'Greece' }
  ],
  script: `
    const res = await fetch('some_url?country=' + value);
    const stateOptions = await res.json();
    setValue('state', 'options', stateOptions);
  `
},
{
  component: 'select',
  label: 'State',
  name: 'state',
  options: []
}

In the following example a form script is used to dynamically set the value of filterValue to select some option elements of the state combo box based on the value of the country combo box

{
  "component": "select",
  "label": "Cuntry",
  "name": "country",
  "react-rsuite5": {
    "cleanable": true,
    "searchable": false
  },
  "options": [
    { "value": "italy", "label": "Italy" },
    { "value": "us", "label": "United States"}
  ],
  "script": `setValue('state', 'filterValue', country);`
},
{
  "component": "select",
  "label": "State",
  "name": "state",
  "filterKey": "country",
  "react-rsuite5": {
    "cleanable": false,
    "searchable": false
  },
  "options": [
    { "value": "emlia", "label": "Emilia Romagna", "country": "italy" },
    { "value": "lombardia", "label": "Lombardia", "country": "italy" },
    { "value": "oregon", "label": "Oregon", "country": "us" },
    { "value": "delware", "label": "Delaware", "country": "us"}
  ]
}

Cascading drop downs

With some form scripts it's also possible to fetch values and fill a cascading forms, for example these dropdowns for countrys and related states / provinces:

The script for the state field just fetches the provinces / states from an external URL and build the options property of the cascading drop down state.

During fetching the script disables the state field, the yield(); statement actually re-renders the form, applying the disabled value for state (generally the values applied to the form are applied at the end of the form script).

if (country != null) {
  // disable the field "state" during fetch
  disable('state');
  // trigger a re-render, otherwise the disabled property will not be applied
  yield();
  // fetch list of states and build "options" array
  const req = await fetch(`https://unpkg.com/lets-form-countries@1.0.1/${country.toUpperCase()}.json`);
  const countryDefinition = await req.json();
  const options = countryDefinition
    .provinces.map(province => ({ value: province, label: province }));
  // set the "option" property of the "state" field and enable it
  setValue('state', 'options', options);
  enable('state');
}

Reference

Property	Type	Description
component	string	= "select"
name	string	The name of the field and the key of the JSON
label	string \| i18n	Label of the field
hint	string \| i18n	Help text for the field (generally shown below the input box)
placeholder	string \| i18n	Placeholder text, visibile when the field is empty
options	array	Combo box options, an array of objects containing these keys: value, label, image. Any additional key can be safely added to be used with filterKey and filterValue
showImageOptions	boolean	Show image field for Select options to be displayed in the drop-down
filterKey	string	Object key in option object used for filtering
filterValue	string	Value used to filter the options (only options with equal to will be shown
disabled	boolean	Disables and greys out the field
readOnly	boolean	Put the field in read only mode
hidden	boolean	Hides the field from the form
Pick up a framework to show specific properties Select framework