In this article, we’ll walk you through setting the default value for <select>
elements in React.
We’ll also explore how to set default value in react-select.
Specific Examples
Set default value for <select>
elements in React
Let’s imagine we want users to select the size of pizza.
We have three options – small, standard and large, and want standard option to be selected by default.
To set the default value for <select> element in React, simply set its defaultValue attribute to the same value as one of the options.
Let’s look at the code example.
Move the slider to see the live demo.
In this case, the second option has a value of ‘standard’. Because the defaultValue attribute is also set to ‘standard’, this option is selected by default.
Set placeholder option as the default
Sometimes you want to use one of the options as a placeholder. This may be useful to help users make the right choice, for example.
In our example, let’s say you want the <select> element to say ‘Select pizza size’ by default.
To do this, simply add another <option> that says ‘Select pizza size’ and set it to default.
To set this option as the default, set the defaultValue attribute of <select> element to the same value as the option.
<select
value={selectedSize}
defaultValue={"placeholder"}
onChange={(e) => setSelectedSize(e.target.value)}
>
<option value={"placeholder"}>Select pizza size</option>
<option value={"small"}>Small</option>
<option value={"standard"}>Standard</option>
<option value={"large"}>Large</option>
</select>
As you’d expect, the <select> element now says ‘Select pizza size’ by default.
However, this option is just a placeholder. You don’t want users to submit the placeholder option.
For this reason, add disabled attribute to the <option> that should not be selected.
<option disabled value={"placeholder"}>Select pizza size</option>
Controlled <select>
input
In React apps, it’s best to store user inputs in the state. Input elements (like <select>
) that follow this pattern are called controlled components.
We use useState()
hook to initialize state values. It returns two values – the state variable and the function to update it.
const [selectedSize, setSelectedSize] = useState();
Every time user chooses one of the listed options, change
event occurs. So we can use the onChange
event handler to set selectedSize
state variable to the value of <option> that user selected.
react-select
react-select
provides a custom <Select>
component with useful features like autocomplete and multiselect.
First, let’s add options to the custom<Select>
component. Set options prop to an array of objects – where each object represents one <option>
.
let options = [
{ label: "Small", value: "small" },
{ label: "Standard", value: "standard" },
{ label: "Large", value: "large" }
];
<Select
options={options}
defaultValue={{ label: "Standard", value: "standard" }}
></Select>
Every object (option) has two properties: label
and value
, which correspond to the value of label of <option> elements.
Set default value for react-select
component
To start, import custom <Select>
component from react-select
.
As you might expect, <Select>
also accepts the defaultValue
prop. To set a default option, simply set defaultValue
equal to an object with label and value properties, just like other options in the array.
The value of defaultValue
prop is set to one object, because we have only one default option. If we had a dropdown with multi-select feature, then we might set defaultValue to an array of options (objects).
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.
Let’s look at a live demo again. We have set label as the default option. However, that option is not in the options array of objects. So when user expands the dropdown, the label is not there.