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.
Steps to disable an option in react-select
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 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.
3. Output
Run project and check the output.
Thank you for reading. Happy Coding!
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
Hi Temitayo,
Just use the following link for your demo.
https://stackblitz.com/edit/react-fuc3uf
I hope this will be helpful to you!
how to disable the particular option in react by using condition to that particular option
You have to store your options in a state variable and depending on your condition you can change the list of options in the state variable.