React Select
Creating dropdown menus in React
🔽 What is React Select?
React select creates dropdown menus for choosing from predefined options. Like other form inputs, it's controlled through state using the value and onChange props, making it easy to manage and validate user selections.
function CountrySelector() {
const [country, setCountry] = useState('usa');
return (
<select value={country} onChange={(e) => setCountry(e.target.value)}>
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
);
}
Output:
Select Features
Options
List of choices
<option value="1">One</option>Selected Value
Current selection
value={selected}Dynamic Options
Generate from array
items.map(item =>
<option />)Multiple Select
Choose multiple items
<select multiple />🔹 Basic Select Dropdown
A controlled select element uses the value prop to display the current selection and onChange to update state when users choose a different option. Each option needs a unique value attribute.
import { useState } from 'react';
function FruitSelector() {
const [fruit, setFruit] = useState('apple');
return (
<div>
<label>Choose a fruit:</label>
<select
value={fruit}
onChange={(e) => setFruit(e.target.value)}
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
<p>You selected: {fruit}</p>
</div>
);
}Output:
You selected: apple
🔹 Dynamic Select from Array
Instead of hardcoding options, generate them dynamically from an array using map(). This makes your code more maintainable and allows you to easily update options from API data or other sources.
function ColorPicker() {
const [color, setColor] = useState('red');
const colors = [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
{ value: 'yellow', label: 'Yellow' }
];
return (
<div>
<select
value={color}
onChange={(e) => setColor(e.target.value)}
>
{colors.map((color) => (
<option key={color.value} value={color.value}>
{color.label}
</option>
))}
</select>
<div
style={{
width: '50px',
height: '50px',
backgroundColor: color,
marginTop: '10px'
}}
/>
</div>
);
}Output:
🔹 Select with Default Option
Add a placeholder or prompt option at the top of your select to guide users. This is especially useful when the selection is required and you want to ensure users make an active choice.
function AgeSelector() {
const [age, setAge] = useState('');
return (
<div>
<select
value={age}
onChange={(e) => setAge(e.target.value)}
>
<option value="">Select your age range</option>
<option value="18-25">18-25</option>
<option value="26-35">26-35</option>
<option value="36-50">36-50</option>
<option value="50+">50+</option>
</select>
{age && <p>Selected: {age}</p>}
</div>
);
}Output:
🔹 Grouped Options
Use optgroup elements to organize related options into categories. This improves usability when you have many options by grouping them logically, making it easier for users to find what they need.
function VehicleSelector() {
const [vehicle, setVehicle] = useState('');
return (
<select
value={vehicle}
onChange={(e) => setVehicle(e.target.value)}
>
<option value="">Choose a vehicle</option>
<optgroup label="Cars">
<option value="sedan">Sedan</option>
<option value="suv">SUV</option>
<option value="coupe">Coupe</option>
</optgroup>
<optgroup label="Motorcycles">
<option value="sport">Sport</option>
<option value="cruiser">Cruiser</option>
<option value="touring">Touring</option>
</optgroup>
</select>
);
}Output:
🔹 Multiple Select
Allow users to select multiple options by adding the multiple attribute. The value becomes an array, and you need to handle the selected options differently in your onChange handler using Array.from().
function SkillsSelector() {
const [skills, setSkills] = useState([]);
const handleChange = (e) => {
const selected = Array.from(
e.target.selectedOptions,
option => option.value
);
setSkills(selected);
};
return (
<div>
<select
multiple
value={skills}
onChange={handleChange}
style={{ height: '100px' }}
>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="ruby">Ruby</option>
</select>
<p>Selected: {skills.join(', ')}</p>
</div>
);
}Output:
Hold Ctrl/Cmd to select multiple