You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/content/reference/react-dom/components/option.md
+23-24Lines changed: 23 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -4,12 +4,12 @@ title: "<option>"
4
4
5
5
<Intro>
6
6
7
-
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>`](/reference/react-dom/components/select) box.
7
+
El [componente integrado`<option>`del navegador](https://developer.mozilla.org/es/docs/Web/HTML/Element/option)te permite mostrar una opción dentro de un cuadro [`<select>`](/reference/react-dom/components/select).
8
8
9
9
```js
10
10
<select>
11
-
<option value="someOption">Some option</option>
12
-
<option value="otherOption">Other option</option>
11
+
<option value="someOption">Alguna opción</option>
12
+
<option value="otherOption">Otra opción</option>
13
13
</select>
14
14
```
15
15
@@ -19,44 +19,44 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
19
19
20
20
---
21
21
22
-
## Reference {/*reference*/}
22
+
## Referencia {/*reference*/}
23
23
24
24
### `<option>` {/*option*/}
25
25
26
-
The [built-in browser`<option>`component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
26
+
El [componente integrado`<option>`del navegador](https://developer.mozilla.org/es/docs/Web/HTML/Element/option) te permite mostrar una opción dentro de un cuadro [`<select>`](/reference/react-dom/components/select).
27
27
28
28
```js
29
29
<select>
30
-
<option value="someOption">Some option</option>
31
-
<option value="otherOption">Other option</option>
30
+
<option value="someOption">Alguna opción</option>
31
+
<option value="otherOption">Otra opción</option>
32
32
</select>
33
33
```
34
34
35
-
[See more examples below.](#usage)
35
+
[Mira más ejemplos a continuación.](#usage)
36
36
37
37
#### Props {/*props*/}
38
38
39
-
`<option>`supports all [common element props.](/reference/react-dom/components/common#props)
39
+
`<option>`es compatible con todas las [props de elementos comunes.](/reference/react-dom/components/common#props)
40
40
41
-
Additionally, `<option>`supports these props:
41
+
Además, `<option>`admite estas props:
42
42
43
-
*[`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
44
-
*[`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
45
-
*[`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>`in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form)if this option is selected.
43
+
*[`disabled`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-disabled): Un booleano. Si es `verdadero`, la opción no se podrá seleccionar y aparecerá atenuada.
44
+
*[`label`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-label): Una string. Especifica el significado de la opción. Si no se especifica, se utiliza el texto dentro de la opción.
45
+
*[`value`](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-value: El valor que se usará [al enviar el `<select>`padre en un formulario](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form)si se selecciona esta opción.
46
46
47
-
#### Caveats {/*caveats*/}
47
+
#### Advertencias {/*caveats*/}
48
48
49
-
* React does not support the`selected`attribute on `<option>`. Instead, pass this option's `value`to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option)for an uncontrolled select box, or[`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable)for a controlled select box.
49
+
* React no admite el atributo`selected`en `<option>`. En su lugar, pasa el `value`de esta opción al padre [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option)para un cuadro de selección no controlado, o[`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable)para un cuadro de selección controlado.
50
50
51
51
---
52
52
53
-
## Usage {/*usage*/}
53
+
## Uso {/*usage*/}
54
54
55
-
### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
55
+
### Mostrar un cuadro de selección con opciones {/*displaying-a-select-box-with-options*/}
56
56
57
-
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.
57
+
Representa un`<select>`con una lista de componentes `<option>`dentro para mostrar un cuadro de selección. Asigna a cada `<option>`un`value`que represente los datos que se enviarán con el formulario.
58
58
59
-
[Read more about displaying a `<select>`with a list of `<option>` components.](/reference/react-dom/components/select)
59
+
[Obtén más información sobre cómo mostrar un `<select>`con una lista de componentes `<option>`.](/reference/react-dom/components/select)
60
60
61
61
<Sandpack>
62
62
@@ -66,9 +66,9 @@ export default function FruitPicker() {
66
66
<label>
67
67
Pick a fruit:
68
68
<select name="selectedFruit">
69
-
<option value="apple">Apple</option>
70
-
<option value="banana">Banana</option>
71
-
<option value="orange">Orange</option>
69
+
<option value="manzana">Manzana</option>
70
+
<option value="banano">Banano</option>
71
+
<option value="naranja">Naranja</option>
72
72
</select>
73
73
</label>
74
74
);
@@ -79,5 +79,4 @@ export default function FruitPicker() {
0 commit comments