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.

Checkout more articles on ReactJS

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

https://youtu.be/mhLVjY09FOc

Steps to disable an option in react-select

Implement dropdown
Disable an option
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.

import React, { useState } from 'react';
import Select from 'react-select';
...
...
  const data = [
    {
      value: 1,
      label: "cerulean"
    },
    {
      value: 2,
      label: "fuchsia rose",
      isdisabled: true // disable this option
    },
    {
      value: 3,
      label: "true red"
    },
    {
      value: 4,
      label: "aqua sky",
      isdisabled: true  // disable this option
    },
    {
      value: 5,
      label: "tigerlily"
    },
    {
      value: 6,
      label: "blue turquoise"
    }
  ];
...
...
      <Select
        ...
        ...
        isOptionDisabled={(option) => option.isdisabled} // disable an option
      />
...
...
export default App;

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