<select>
and <option>
elements are extremely useful for collecting user inputs. As a web developer, you can use <select>
to define a fixed set of options and limit user input to those options.
In some cases, you want to set a generic option as a default. Maybe it is the choice 90% of the time. The most common choice can be set as a default value for the <select>
element. If users want, they can make another choice. If not, default value will be submitted.
Sometimes webmasters set a default value to instructions for choosing values.
Specific Examples
Set default value for <select>
elements in React
In this article, we will explain how to set a default value for <select>
elements in React.
To set a default value for <select>
elements in React, use the defaultValue
prop to the same name as value
attribute of one of the options.
<select>
and <option>
elements go hand in hand.
Let’s look at an example:
import "./styles.css";
import { useState } from "react";
export default function Select() {
const [selectedAnimal, setSelectedAnimal] = useState();
return (
<div>
<select
value={selectedAnimal}
defaultValue={"default"}
onChange={(e) => setSelectedAnimal(e.target.value)}
>
<option value={"default"} disabled>
Choose an animal
</option>
<option value={"Dog"}>Dog</option>
<option value={"Piggy"}>Piggy</option>
<option value={"Turkey"}>Turkey</option>
</select>
<h1>You selected {selectedAnimal}</h1>
</div>
);
}
There’s a lot to dissect here. We have a <select>
element where users choose an animal.
In this case, the default value is set to instructions for choosing a value (‘Choose an animal’). As you can see, the defaultValue
attribute of the <select>
element is set to the value
of one of the <option>
elements.
Users should not be able to choose this default value. It’s not a valid option, only instructions. So we add the disabled
prop to the <option>
chosen as the default.
Check out live example on CodeSandbox.
State values and change the value of <select>
React recommends to store user’s inputs in the state. Input elements (like <select>
) that store their values in the state are called controlled components.
We use the useState()
hook, which returns two values – the state variable and the function to update it.
We use the onChange
attribute to specify an event handler. The function will be executed every time users choose one of the options. The selectedAnimal
state variable will be set to an argument to the setSelectedAnimal()
function, which is the value
attribute of user’s selected <option>
. selectedAnimal
is the state variable that stores user’s current choice.
react-select
react-select
provides a custom <select>
component with rich functionality. It supports various useful features like autocomplete and multiselect.
When using react-select
, you only need to provide a list of options. You don’t need to create many <options>
elements.
Every item in the options
array represents an individual <option>
element. Options are formatted as objects with two properties: label
and value
. Values of these properties represent each option’s label and value. Label is the value between opening and closing <option>
tags. Value is the value of <option>
element’s value
prop.
You don’t need to define onChange
event handler for react-select
custom component. It takes care of everything for you.
Set default value for react-select
component
To start, import custom Select
component from react-select
.
To specify a default value for custom react-select
component, you need to set the defaultValue
prop to a JavaScript object. Let’s look at the code example:
import "./styles.css";
import Select from "react-select";
export default function App() {
let options = [
{ label: "Dog", value: "dog" },
{ label: "Piggy", value: "piggy" },
{ label: "Turkey", value: "turkey" }
];
return (
<div className="App" style={{ width: 200 }}>
<Select
options={options}
defaultValue={{ label: "Choose an animal", value: "placeholder" }}
></Select>
</div>
);
}
The value of defaultValue
prop is set to one object, because there can be only one default option. The object has two properties – label
and value
, which represent the label and value of the default option, respectively.
It’s much easier to set a default value for react-select
component. It also provides a better experience. Check out live demo. As you can see, when user expands the list of options, the default value is not there.