CODEWITHSUNDEEP
javascriptreactjsreact-select
phongyewtong
phongyewtong

Reputation: 5309

How to disable input on react-select?

How to disable input on react-select? Is that possible? I just want it to be a dropdown.

<Select
    placeholder="Action"
    className="col-3 mt-3"
    value={orderStatusInput}
    onChange={this.onOrderStatusChange}
    options={orderStatusOptions}
/>

enter image description here

Upvotes: 25

Views: 29170

Answers (3)

Akash Amar
Akash Amar

Reputation: 441

<Select isDisabled={true} />

Upvotes: 2

ultimoTG
ultimoTG

Reputation: 953

If you want the search input to be disabled and just want it to be a dropdown, you can set the isSearchable property to false:

<Select
  placeholder="Action"
  className="col-3 mt-3"
  value={orderStatusInput}
  onChange={this.onOrderStatusChange}
  options={orderStatusOptions}
  isSearchable={false}
/>

Upvotes: 18

Alex Mckay
Alex Mckay

Reputation: 3696

To make React Select act as a dropdown

export default function App() {
  return (
    <div>
      <ReactSelect isSearchable={false} />
    </div>
  );
}

Upvotes: 42

Related Questions