Scribd
Upload
25 views4 pages

Option - React

The document provides an overview of the built-in <option> component in React, which is used to render options within a <select> box. It details the supported props, including 'disabled', 'label', and 'value', and notes that the 'selected' attribute is not supported. An example of how to implement a <select> with <option> components is also included.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views4 pages

Option - React

The document provides an overview of the built-in <option> component in React, which is used to render options within a <select> box. It details the supported props, including 'disabled', 'label', and 'value', and notes that the 'selected' attribute is not supported. An example of how to implement a <select> with <option> components is also included.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

20/02/2025, 18:27 <option> – React

v19

API REFERENCE COMPONENTS

<option>
The built-in browser <option> component lets you render an
option inside a <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

<option>

The built-in browser <option> component lets you render an option inside a
<select> box.

<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>

[Link] 1/4
20/02/2025, 18:27 <option> – React

See more examples below.

Props

<option> supports all common element props.

Additionally, <option> supports these props:

disabled : A boolean. If true , the option will not be selectable and will
appear dimmed.
label : A string. Specifies the meaning of the option. If not specified, the
text inside the option is used.
value : The value to be used when submitting the parent <select> in a
form if this option is selected.

Caveats

React does not support the selected attribute on <option> . Instead,


pass this option’s value to the parent <select defaultValue> for an
uncontrolled select box, or <select value> for a controlled select.

Usage

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.

[Link] Download Reset

export default function FruitPicker() {


return (
<label>
Pick a fruit:
<select name="selectedFruit">

[Link] 2/4
20/02/2025, 18:27 <option> – React

<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}

PREVIOUS

<input>

NEXT

<progress>

Copyright © Meta Platforms, Inc

uwu?

[Link] 3/4
20/02/2025, 18:27 <option> – React

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

[Link] 4/4

You might also like