content: [API Reference](https://react.dev/reference/react)
  
  [Components](https://react.dev/reference/react-dom/components)
  
  # &lt;option&gt;[Link for this heading]()
  
  The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](https://react.dev/reference/react-dom/components/select) box.
  
  ```
  
  <select>
  
    <option value="someOption">Some option</option>
  
    <option value="otherOption">Other option</option>
  
  </select>
  ```
  
  - [Reference]()
    
    - [`<option>`]()
  - [Usage]()
    
    - [Displaying a select box with options]()
  
  * * *
  
  ## Reference[Link for Reference]()
  
  ### `<option>`[Link for this heading]()
  
  The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](https://react.dev/reference/react-dom/components/select) box.
  
  ```
  
  <select>
  
    <option value="someOption">Some option</option>
  
    <option value="otherOption">Other option</option>
  
  </select>
  ```
  
  [See more examples below.]()
  
  #### Props[Link for Props]()
  
  `<option>` supports all [common element props.](https://react.dev/reference/react-dom/components/common)
  
  Additionally, `<option>` supports these props:
  
  - [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option): A boolean. If `true`, the option will not be selectable and will appear dimmed.
  - [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
  - [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option): The value to be used [when submitting the parent `<select>` in a form](https://react.dev/reference/react-dom/components/select) if this option is selected.
  
  #### Caveats[Link for Caveats]()
  
  - React does not support the `selected` attribute on `<option>`. Instead, pass this option’s `value` to the parent [`<select defaultValue>`](https://react.dev/reference/react-dom/components/select) for an uncontrolled select box, or [`<select value>`](https://react.dev/reference/react-dom/components/select) for a controlled select.
  
  * * *
  
  ## Usage[Link for Usage]()
  
  ### Displaying a select box with options[Link for 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.
  
  [Read more about displaying a `<select>` with a list of `<option>` components.](https://react.dev/reference/react-dom/components/select)
  
  App.js
  
  App.js
  
  Reset[Fork](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app "Open in CodeSandbox")
  
  ```
  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>
    );
  }
  
  ```
  
  [Previous&lt;input&gt;](https://react.dev/reference/react-dom/components/input)
  
  [Next&lt;progress&gt;](https://react.dev/reference/react-dom/components/progress)