Select

Select input. Based on react-select.

If you need the user to be able to select multiple values, you can use the MultiSelect component.

Props

• inputId = {string}
• name = {string}
• options = {object[]}
• placeholder = {string}
• value = {object}
• onChange = {function}
• renderSelectedOption = {function | default: (item) => item.label}
• selectedOptionsStyle = {object}
• Any props from react-select.

Example with code

import Select from '@components/Select';

const MyComponent = () => {
  const options = [{
    label: 'Option 1',
    value: 'first',
  }, {
    label: 'Option 2',
    value: 'second',
  }, {
    label: 'Option 3',
    value: 'third',
  }];

  const handleInputChange = (value, { name }) => {
    console.log(name, value);
  };

  return (
    <Select
      inputId="my_select"
      instanceId="my_select"
      options={options}
      placeholder="Select an option"
      onChange={handleInputChange}
      isClearable
    />
  );
};