How to fix Warning: You provided a `selected` prop to a form field without an `onChange` handler in React

ReactBEGINNERLOWUpdated Dec 22, 2025· 121 views

React warns when a select element is provided with a value or uses the 'selected' attribute without an onChange handler. This creates a controlled component that cannot be updated, rendering it read-only unintentionally.

Quick fix

Fixes Warning: You provided a `selected` prop to a form field without an `onChange` handler

import { useState } from 'react';

function MyDropdown() {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}
  1. For controlled components: Add onChange handler
  2. For uncontrolled components: Use defaultValue
  3. For read-only selects: Add readOnly prop
  4. Never use 'selected' attribute on <option> elements
react — error
import { useState } from 'react';
function MyDropdown() {
  const [selectedValue, setSelectedValue] = useState('option1');
  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };
  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}
Warning: You provided a `selected` prop to a form field without an `onChange` handler

What this error means

This warning occurs when you attempt to control a <select> element's value without providing a way to update it. React distinguishes between controlled components (where React manages the value via state and onChange handlers) and uncontrolled components (where the DOM manages its own state). The warning specifically appears in two scenarios: when you use a 'value' prop on a <select> element without an 'onChange' handler, or when you use the HTML 'selected' attribute directly on <option> elements (which React doesn't support). In both cases, React cannot update the selection, making the dropdown effectively read-only even though it appears interactive. This is React's way of preventing a common mistake: creating a form field that looks interactive but cannot actually be changed by the user. The warning helps developers choose the correct pattern—either fully controlled (with onChange) or uncontrolled (with defaultValue).

Typical symptoms

  • React warning appears in browser console during development
  • Select dropdown displays correctly but shows warning message
  • Warning mentions 'selected' prop to form field without onChange handler
  • Select element appears read-only or unresponsive to user interaction

Common causes

  1. Using 'selected' attribute directly on <option> elements instead of 'value' prop on <select>
  2. Providing a 'value' prop to <select> without an 'onChange' handler (controlled component without update mechanism)
  3. Mixing controlled and uncontrolled patterns by setting initial value but not managing updates
  4. Missing onChange handler when trying to create a controlled select component

How to fix "Warning: You provided a `selected` prop to a form field without an `onChange` handler"

1For controlled components: Add onChange handler

If you want React to control the select value, provide both 'value' and 'onChange' props:

jsx
import { useState } from 'react';

function MyDropdown() {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

The 'value' prop on <select> determines which option is selected, not the 'selected' attribute on <option>.

2For uncontrolled components: Use defaultValue

If you want the DOM to manage the select value, use 'defaultValue' instead of 'value':

jsx
function MyDropdown() {
  return (
    <select defaultValue="option2">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

With 'defaultValue', React sets the initial selection but doesn't control subsequent changes.

3For read-only selects: Add readOnly prop

If the select should be displayed but not editable, add the 'readOnly' prop:

jsx
function MyDropdown() {
  return (
    <select value="option1" readOnly>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

Note: 'readOnly' isn't fully supported on <select> elements in all browsers. Consider using 'disabled' instead, or handle clicks to prevent changes.

4Never use 'selected' attribute on <option> elements

React doesn't support the 'selected' attribute on individual options. This is incorrect:

jsx
// ❌ Wrong - causes warning
<select>
  <option value="option1">Option 1</option>
  <option value="option2" selected>Option 2</option>
  <option value="option3">Option 3</option>
</select>

Instead, pass the selected value to the parent <select> element:

jsx
// ✅ Correct - controlled
<select value="option2" onChange={handleChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

// ✅ Correct - uncontrolled
<select defaultValue="option2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Advanced notes

Controlled vs Uncontrolled Components

React provides two patterns for form elements:

1. Controlled: React state is the "single source of truth". Use 'value' + 'onChange' props. Every state mutation has an associated handler function, making it easier to validate or modify user input.

2. Uncontrolled: The DOM maintains its own internal state. Use 'defaultValue' prop for initial value. Access current value via refs or form submission. Simpler for basic forms but harder to validate in real-time.

Why React Uses 'value' on <select>

In HTML, the 'selected' attribute on <option> elements determines which option is selected. React simplified this by using a 'value' attribute on the root <select> tag instead, making it consistent with other form elements like <input> and <textarea>.

Multiple Select Elements

For <select multiple>, the 'value' prop accepts an array:

jsx
const [selected, setSelected] = useState(['option1', 'option3']);

<select
  multiple
  value={selected}
  onChange={(e) => {
    const values = Array.from(e.target.selectedOptions, opt => opt.value);
    setSelected(values);
  }}
>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Performance Considerations

For large dropdown lists (100+ options), consider:
- Virtualization libraries like react-window
- Third-party libraries like react-select with async loading
- Native <datalist> elements for simple autocomplete scenarios

Frequently asked questions

What does "Warning: You provided a `selected` prop to a form field without an `on" mean?
This warning occurs when you attempt to control a <select> element's value without providing a way to update it. React distinguishes between controlled components (where React manages the value via state and onChange handlers) and uncontrolled components (where the DOM manages its own state). The warning specifically appears in two scenarios: when you use a 'value' prop on a <select> element without an 'onChange' handler, or when you use the HTML 'selected' attribute directly on <option> elements (which React doesn't support).
How do I fix "Warning: You provided a `selected` prop to a form field without an `on"?
React warns when a select element is provided with a value or uses the 'selected' attribute without an onChange handler. This creates a controlled component that cannot be updated, rendering it read-only unintentionally.
What causes "Warning: You provided a `selected` prop to a form field without an `on"?
Using 'selected' attribute directly on <option> elements instead of 'value' prop on <select> Providing a 'value' prop to <select> without an 'onChange' handler (controlled component without update mechanism) Mixing controlled and uncontrolled patterns by setting initial value but not managing updates
Is the "Warning: You provided a `selected` prop to a form field without an `on" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading