Select

We can define a select input, the select input also includes a built-it search that allows the user having an autocomplete, that is mostly usefull for very long lists. By default the select input can select only one option, to enable multiple selection, the property isMulti must be set to true. In certain case, we might want to automatically disable the select if there is no option in the list, you can do this by setting the disableIfEmpty property to true

"which_one": {
  "component": "select",
  "label": "Which one ?",
  "placeholder": "Overwritten placeholder",
  "list": [
    {
      "value": "this_one",
      "label": "This one"
    },
    {
      "value": "this_other_one",
      "label": "This other one"
    },
    {
      "value": "this_extra_one",
      "label": "This extra one"
    }
  ]
}

If the user selected the first option of the list, the data will be like :

{
  "wich_one": "this_one",
  "wich_one_selected_list_item": {
    "value": "this_one",
    "label": "This one"
  }
}

"multiple": {
  "component": "select",
  "label": "Multiple selected",
  "placeholder": "Overwritten placeholder",
  "isMulti": true,
  "list": [
    {
      "value": "this_one",
      "label": "This one"
    },
    {
      "value": "this_other_one",
      "label": "This other one"
    },
    {
      "value": "this_extra_one",
      "label": "This extra one"
    }
  ]
}

We can allow the user to select multiple options by setting the property isMulti to true.

{
  "select_one": {
    "component": "select",
    "label": "300px width",
    "list": [],
    "inputOptions": {
      "size": "300px"
    }
  },
  "select_two": {
    "component": "select",
    "label": "50% width",
    "list": [],
    "inputOptions": {
      "size": "50%"
    }
  }
}

We also can set the size (width) of the select by defining the property inputOptions.size, it takes all available properties for the size that can be done in classic css.

Select

Storybook Examples

Select List#

Disabled If Empty List Select#

Sized Select#

Select With Number As Value#

Select Clearable Option#

Storybook Examples​