React Forms Select

React Forms – Select (Dropdown)

In plain HTML, the selected value of a <select> element is determined by the selected attribute:

But in React, the <select> element becomes a controlled component, meaning the selected value is controlled by React state using the value attribute.

✅ Basic Select Example

import { useState } from "react";

function MyForm() {
const [car, setCar] = useState("Volvo");

return (
<form>
<label>Select a car: </label>

<select value={car} onChange={(event) => setCar(event.target.value)}>
<option value="Volvo">Volvo</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Tesla">Tesla</option>
</select>

<p>You selected: {car}</p>
</form>
);
}

import { useState } from "react";

function MyForm() {

const [car, setCar] = useState("Volvo");

return (

<form>

<label>Select a car: </label>

<select value={car} onChange={(event) => setCar(event.target.value)}>

<option value="Volvo">Volvo</option>

<option value="Tesla">Tesla</option>

</select>

<p>You selected: {car}</p>

</form>

);

}

export default MyForm;

🔹 Select with Form Submit

import { useState } from "react";

function CarForm() {
const [car, setCar] = useState("BMW");

const handleSubmit = (event) => {
event.preventDefault();
alert("You selected: " + car);
};

return (
<form onSubmit={handleSubmit}>
<select value={car} onChange={(e) => setCar(e.target.value)}>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
</select>

<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function CarForm() {

const [car, setCar] = useState("BMW");

const handleSubmit = (event) => {

event.preventDefault();

alert("You selected: " + car);

};

return (

<select value={car} onChange={(e) => setCar(e.target.value)}>

<option value="Mercedes">Mercedes</option>

<option value="Toyota">Toyota</option>

<option value="Honda">Honda</option>

</select>

<button type="submit">Submit</button>

</form>

);

}

export default CarForm;

🔹 Dynamic Select from Array

import { useState } from "react";

function CountrySelector() {
const countries = ["India", "USA", "UK", "Canada", "Australia"];
const [country, setCountry] = useState("");

return (
<>
<select value={country} onChange={(e) => setCountry(e.target.value)}>
<option value="">-- Select Country --</option>
{countries.map((c, index) => (
<option key={index} value={c}>
{c}
</option>
))}
</select>

{country && <p>You selected: {country}</p>}
</>
);
}

import { useState } from "react";

function CountrySelector() {

const countries = ["India", "USA", "UK", "Canada", "Australia"];

const [country, setCountry] = useState("");

return (

<select value={country} onChange={(e) => setCountry(e.target.value)}>

<option value="">-- Select Country --</option>

{countries.map((c, index) => (

{c}

</option>

))}

</select>

{country && <p>You selected: {country}</p>}

</>

);

}

export default CountrySelector;

🔹 Multi-Select Example

React also supports selecting multiple values:

import { useState } from "react";

function MultiSelect() {
const [selected, setSelected] = useState([]);

const handleChange = (e) => {
const values = Array.from(e.target.selectedOptions, option => option.value);
setSelected(values);
};

return (
<>
<select multiple value={selected} onChange={handleChange}>
<option value="React">React</option>
<option value="Angular">Angular</option>
<option value="Vue">Vue</option>
<option value="Svelte">Svelte</option>
</select>

<p>Selected: {selected.join(", ")}</p>
</>
);
}

import { useState } from "react";

function MultiSelect() {

const [selected, setSelected] = useState([]);

const handleChange = (e) => {

const values = Array.from(e.target.selectedOptions, option => option.value);

setSelected(values);

};

return (

<option value="React">React</option>

<option value="Angular">Angular</option>

<option value="Svelte">Svelte</option>

</select>

<p>Selected: {selected.join(", ")}</p>

</>

);

}

export default MultiSelect;

🧠 Key Notes

✔ value binds the selected option to state
✔ onChange updates state when user selects an option
✔ Use arrays for multiple selections
✔ Should always be controlled (not uncontrolled)

React Forms Select