20/02/2025, 18:27 <select> – React
v19
API REFERENCE COMPONENTS
<select>
The built-in browser <select> component lets you render a select
box with options.
<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>
Reference
<select>
Usage
Displaying a select box with options
Providing a label for a select box
Providing an initially selected option
Enabling multiple selection
Reading the select box value when submitting a form
Controlling a select box with a state variable
Reference
<select>
To display a select box, render the built-in browser <select> component.
<select>
https://react.dev/reference/react-dom/components/select 1/13
20/02/2025, 18:27 <select> – React
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>
See more examples below.
Props
<select> supports all common element props.
You can make a select box controlled by passing a value prop:
value : A string (or an array of strings for multiple={true} ). Controls
which option is selected. Every value string match the value of some
<option> nested inside the <select> .
When you pass value , you must also pass an onChange handler that
updates the passed value.
If your <select> is uncontrolled, you may pass the defaultValue prop
instead:
defaultValue : A string (or an array of strings for multiple={true} ).
Specifies the initially selected option.
These <select> props are relevant both for uncontrolled and controlled
select boxes:
autoComplete : A string. Specifies one of the possible autocomplete
behaviors.
autoFocus : A boolean. If true , React will focus the element on mount.
children : <select> accepts <option> , <optgroup> , and <datalist>
components as children. You can also pass your own components as long
as they eventually render one of the allowed components. If you pass your
own components that eventually render <option> tags, each <option>
you render must have a value .
disabled : A boolean. If true , the select box will not be interactive and
will appear dimmed.
form : A string. Specifies the id of the <form> this select box belongs to.
If omitted, it’s the closest parent form.
https://react.dev/reference/react-dom/components/select 2/13
20/02/2025, 18:27 <select> – React
multiple : A boolean. If true , the browser allows multiple selection.
name : A string. Specifies the name for this select box that’s submitted
with the form.
onChange : An Event handler function. Required for controlled select
boxes. Fires immediately when the user picks a different option. Behaves
like the browser input event.
onChangeCapture : A version of onChange that fires in the capture phase.
onInput : An Event handler function. Fires immediately when the value is
changed by the user. For historical reasons, in React it is idiomatic to use
onChange instead which works similarly.
onInputCapture : A version of onInput that fires in the capture phase.
onInvalid : An Event handler function. Fires if an input fails validation on
form submit. Unlike the built-in invalid event, the React onInvalid
event bubbles.
onInvalidCapture : A version of onInvalid that fires in the capture
phase.
required : A boolean. If true , the value must be provided for the form to
submit.
size : A number. For multiple={true} selects, specifies the preferred
number of initially visible items.
Caveats
Unlike in HTML, passing a selected attribute to <option> is not
supported. Instead, use <select defaultValue> for uncontrolled select
boxes and <select value> for controlled select boxes.
If a select box receives a value prop, it will be treated as controlled.
A select box can’t be both controlled and uncontrolled at the same time.
A select box cannot switch between being controlled or uncontrolled over
its lifetime.
Every controlled select box needs an onChange event handler that
synchronously updates its backing value.
Usage
https://react.dev/reference/react-dom/components/select 3/13
20/02/2025, 18:27 <select> – React
Displaying a select box with options
Render a <select> with a list of <option> components inside to display a
select box. Give each <option> a value representing the data to be
submitted with the form.
App.js Download Reset
export default function FruitPicker() {
return (
<label>
Pick a fruit:
<select name="selectedFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}
Providing a label for a select box
https://react.dev/reference/react-dom/components/select 4/13
20/02/2025, 18:27 <select> – React
Typically, you will place every <select> inside a <label> tag. This tells the
browser that this label is associated with that select box. When the user
clicks the label, the browser will automatically focus the select box. It’s also
essential for accessibility: a screen reader will announce the label caption
when the user focuses the select box.
If you can’t nest <select> into a <label> , associate them by passing the
same ID to <select id> and <label htmlFor> . To avoid conflicts between
multiple instances of one component, generate such an ID with useId .
App.js Download Reset
import { useId } from 'react';
export default function Form() {
const vegetableSelectId = useId();
return (
<>
<label>
Pick a fruit:
<select name="selectedFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
Show more
https://react.dev/reference/react-dom/components/select 5/13
20/02/2025, 18:27 <select> – React
Providing an initially selected option
By default, the browser will select the first <option> in the list. To select a
different option by default, pass that <option> ’s value as the
defaultValue to the <select> element.
App.js Download Reset
export default function FruitPicker() {
return (
<label>
Pick a fruit:
<select name="selectedFruit" defaultValue="orange">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}
https://react.dev/reference/react-dom/components/select 6/13
20/02/2025, 18:27 <select> – React
Pitfall
Unlike in HTML, passing a selected attribute to an individual
<option> is not supported.
Enabling multiple selection
Pass multiple={true} to the <select> to let the user select multiple
options. In that case, if you also specify defaultValue to choose the initially
selected options, it must be an array.
App.js Download Reset
export default function FruitPicker() {
return (
<label>
Pick some fruits:
<select
name="selectedFruit"
defaultValue={['orange', 'banana']}
multiple={true}
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
Show more
https://react.dev/reference/react-dom/components/select 7/13
20/02/2025, 18:27 <select> – React
Reading the select box value when submitting a form
Add a <form> around your select box with a <button type="submit">
inside. It will call your <form onSubmit> event handler. By default, the
browser will send the form data to the current URL and refresh the page. You
can override that behavior by calling e.preventDefault() . Read the form
data with new FormData(e.target) .
App.js Download Reset
export default function EditPost() {
function handleSubmit(e) {
// Prevent the browser from reloading the page
e.preventDefault();
// Read the form data
const form = e.target;
const formData = new FormData(form);
// You can pass formData as a fetch body directly:
fetch('/some-api', { method: form.method, body: formData });
// You can generate a URL out of it, as the browser does by defau
console.log(new URLSearchParams(formData).toString());
Show more
https://react.dev/reference/react-dom/components/select 8/13
20/02/2025, 18:27 <select> – React
Note
Give a name to your <select> , for example <select
name="selectedFruit" /> . The name you specified will be used as a
key in the form data, for example { selectedFruit: "orange" } .
If you use <select multiple={true}> , the FormData you’ll read
from the form will include each selected value as a separate name-
value pair. Look closely at the console logs in the example above.
Pitfall
By default, any <button> inside a <form> will submit it. This can be
surprising! If you have your own custom Button React component,
consider returning <button type="button"> instead of <button> .
Then, to be explicit, use <button type="submit"> for buttons that
are supposed to submit the form.
https://react.dev/reference/react-dom/components/select 9/13
20/02/2025, 18:27 <select> – React
Controlling a select box with a state variable
A select box like <select /> is uncontrolled. Even if you pass an initially
selected value like <select defaultValue="orange" /> , your JSX only
specifies the initial value, not the value right now.
To render a controlled select box, pass the value prop to it. React will force
the select box to always have the value you passed. Typically, you will
control a select box by declaring a state variable:
function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare
// ...
return (
<select
value={selectedFruit} // ...force the select's value to match the st
onChange={e => setSelectedFruit(e.target.value)} // ... and update t
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
);
}
This is useful if you want to re-render some part of the UI in response to
every selection.
App.js Download Reset
import { useState } from 'react';
export default function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange');
const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']
return (
<>
https://react.dev/reference/react-dom/components/select 10/13
20/02/2025, 18:27 <select> – React
<label>
Pick a fruit:
<select
l { l t dF it}
Show more
Pitfall
If you pass value without onChange , it will be impossible to select
an option. When you control a select box by passing some value to
it, you force it to always have the value you passed. So if you pass a
state variable as a value but forget to update that state variable
synchronously during the onChange event handler, React will revert
the select box after every keystroke back to the value that you
specified.
Unlike in HTML, passing a selected attribute to an individual
<option> is not supported.
https://react.dev/reference/react-dom/components/select 11/13
20/02/2025, 18:27 <select> – React
PREVIOUS
<progress>
NEXT
<textarea>
Copyright © Meta Platforms, Inc
uwu?
Learn React API Reference
Quick Start React APIs
Installation React DOM APIs
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
Community More
Code of Conduct Blog
Meet the Team React Native
Docs Contributors Privacy
Acknowledgements Terms
https://react.dev/reference/react-dom/components/select 12/13
20/02/2025, 18:27 <select> – React
https://react.dev/reference/react-dom/components/select 13/13
