How to disable an option in react-select

Today we’ll show you how to disable an option in react-select. Sometimes you might need to provide the functionality to disable the certain option in dropdown using react-select. So today I will show you by example.

react-select disabled not working, react select isdisabled, react select default disabled option, react-select add new option by default disabled, how to make handle action for disable option in react-select, example to disable dropdown in ReactJS, react-select disable dropdown options, react-select disable autocomplete filter.

In this article, we will show you how to disable the options using react-select package.

Steps to disable an option in react-select

  1. Implement dropdown
  2. Disable an option
  3. Output

1. Implement dropdown

First, we have to implement the dropdown in ReactJS using react-select. If you don’t know then refer to the link below for implementation.

Implement dropdown in ReactJS

To implement dropdown, we used the react-select npm package.

2. Disable an option

We have to add the new attribute called isDisabled and set it to true. React select is providing the method isOptionDisabled to handle action for disable option.

In order to disable the option using this method, you have to return the boolean value from the method.

That’s enough to disable an option.

You may also like the below article to get selected dropdown by value in react-select. By default, if you want to get selected dropdown then you have to pass the whole object as a value but with the help of a few lines of the code, you can get the selection by passing only the value. Checkout the link below for more understanding.

How to get selected by only value in react-select

3. Output

Run project and check the output.

Output - How to disable an option in react-select - Clue Mediator
Output – Disable an option in react-select – Clue Mediator

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

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