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
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

2 Responses

  1. Temitayo says:

    Hello Clue Mediator,

    I am new to using react-hooks but going through your materials most are based on react . I am working on a form where the input field is either enabled or disabled based on the value selected in a dropdown field. How can i achieve this using react hooks.

    i.e if I have a field called Fruits which is a dropdown with three options like mango, orange and guava
    and another input field called number, if mango is selected in the previous field the Number input field is disabled else enabled when other options are selected. Please any help?

    Thank you

Leave a Reply

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