To implement the InputSelect component into your project you’ll need to add the import:

import InputSelect from "@kiwicom/orbit-components/lib/InputSelect";

After adding import to your project you can use it simply like:

const options = [
  {
    title: "Option 1",
    value: 1,
    description: "Description for option 1",
  },
  {
    title: "Option 2",
    value: 2,
    description: "Description for option 2",
  },
  ...
];
<InputSelect options={options} />;

By using the onOptionSelect prop you can have access to the selected option to update your app state based on that. This is called with null when the input value is cleared or there is no selected option. Do not rely on the input’s value attribute to get the selected value.

Optionally, each option can have a group property. If defined, options are displayed grouped with the name of the group as a label separator. All groups are displayed first by default. After that, if showAll is set to true (default), all options are displayed (the ones with a group and the ones without a group, following the order of the array of options). If showAll is set to false, only the options without a defined group are displayed on that bottom list. The showAllLabel allows to customize the label displayed before the bottom part. If showAll is set to true, the default value is "All options". If it’s set to false, the default value is Other options.

const options = [
  {
    title: "Option 1",
    value: 1,
    description: "Description for option 1",
  },
  {
    title: "Option 2",
    value: 2,
    description: "Description for option 2",
    group: "Group name"
  },
  ...
];

If prevSelected is defined, a special group is displayed on top of every options, with the options passed to that prop. This prop is optional and its state is not controlled by the component.

The table below contains all types of props available in the InputSelect component.

The table below contains all types of props available for the object in the Option array.