sajad torkamani

What is React Select?

React Select is a JavaScript library that provides a flexible React select widget. It includes support for multiselect, autocomplete, asynchronous loading of options, and the ability to create options on the fly.

Select props


Array of Option objects that provide the options for the select widget. Option can have any interface.


The default value of the select widget. Must be one of:

  • Option (if single select)
  • Option[] (if multi-select)
  • null (if there is no default value)


The current value of the select widget. Must be either:

  • Option (if single select)
  • Array of Option objects (if multi-select)
  • null (if there’s no value)


Function that must resolve an instance of Option to a string to be displayed as the label for the select option. It’s up to you to choose what property of your Option object will be used as the label.


Function that must resolve an instance of Option to a string to be used as the value for the select option. This is the value that will be used for the underlying <select> element when the form is submitted. Typically, you’d use the ID of entities as the value (e.g., customer ID, user ID, article ID, etc).


Function that handles change events on the select. The function signature is:

  newValue: OnChangeValue<Option, IsMulti>,   
  actionMeta: ActionMeta<Option>
) => void;

Typically, you use the newValue to update the part of your state that keeps track of form values. For example, if you’re using a form library like Formik, you’d pass newValue to setValue.


Render custom option label

   formatOptionLabel={(option, { context }) => {
     /* context can be either `menu` or `value`
        menu - dropdown
        value - value displayed
     return context === 'menu' ? option.label : option. Color;


Leave a comment

Your email address will not be published. Required fields are marked *