From 7b14bccd7c59591b33835e99b88deaf81fc278e5 Mon Sep 17 00:00:00 2001
From: Enricco Gemha <enriccogemha@gmail.com>
Date: Wed, 6 Nov 2024 16:30:53 -0300
Subject: [PATCH 1/2] =?UTF-8?q?Tradu=C3=A7=C3=A3o=20completa=20at=C3=A9=20?=
 =?UTF-8?q?`usage`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/react-dom/components/select.md  | 88 +++++++++----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 0dbdc1537..f7b6fe65c 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,12 +4,12 @@ title: "<select>"
 
 <Intro>
 
-The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+O [componente `<select>` nativo do navegador](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select) permite que você renderize uma caixa de seleção com opções.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Alguma opção</option>
+  <option value="otherOption">Outra opção</option>
 </select>
 ```
 
@@ -19,68 +19,68 @@ The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/
 
 ---
 
-## Reference {/*reference*/}
+## Referência {/*reference*/}
 
 ### `<select>` {/*select*/}
 
-To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+Para exibir uma caixa de seleção, renderize o componente [`<select>` nativo do navegador](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select).
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Alguma opção</option>
+  <option value="otherOption">Outra opção</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` suporta todas as [props de elementos gerais.](/reference/react-dom/components/common#props)
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Você pode [tornar uma caixa de seleção controlada](#controlling-a-select-box-with-a-state-variable) passando a prop `value`:
 
-* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+* `value`: Uma string (ou um array de strings para [`multiple={true}`](#enabling-multiple-selection)). Controla qual opção está selecionada. Cada valor de string corresponde ao `value` de algum `<option>` aninhado dentro do `<select>`.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Ao passar `value`, você deve também passar o manipulador `onChange` que atualize o valor passado.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Se o `<select>` for não controlado, você pode passar a prop `defaultValue` em vez disso:
 
-* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+* `defaultValue`: Uma string (ou um array de strings para [`multiple={true}`](#enabling-multiple-selection)). Especifica [a opção selecionada inicialmente.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxes:
+Essas props `<select>` são relevantes tanto para caixas de seleção controladas e não controladas:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#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.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#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.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`autoComplete`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#autocomplete): Uma string. Especifica um dos possíveis [comportamentos de preenchimento automático.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#autofocus): Um booleano. Se `true`, o React irá focar o elemento ao montar.
+* `children`: `<select>` aceita os componentes [`<option>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/optgroup) e [`<datalist>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/datalist) como filhos. Você também pode passar seus próprios componentes, desde que eventualmente renderizam um dos componentes permitidos. Se passar seus próprios componentes, que eventualmente renderizem tags `<option>`, cada `<option>` que você renderize precisa ter um `value`.
+* [`disabled`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#disabled): Um booleano. Se `true`, a caixa de seleção não será interativa e aparecerá desativada.
+* [`form`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#form): Uma string. Especifica o `id` do `<form>` ao qual esta caixa de seleção pertence. Se omitido, será o formulário pai mais próximo.
+* [`multiple`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#multiple): Um booleano. If `true`, o navegador permite [seleção múltipla.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#name): Uma string. Especifica o nome desta caixa de seleção que é [enviado com o formulário.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: Uma função de [manipulador de `Event`](/reference/react-dom/components/common#event-handler). Necessário para [caixas de seleção controladas.](#controlling-a-select-box-with-a-state-variable) Dispara imediatamente quando o usuário escolhe uma opção diferente. Se comporta como o [evento de `input`](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/input_event) do navegador.
+* `onChangeCapture`: Uma versão de `onChange` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/input_event): Uma função de [manipulador de `Event`](/reference/react-dom/components/common#event-handler). Dispara imediatamente quando o valor é alterado pelo usuário. Por razões históricas, é comum usar `onChange` no React, que funciona de forma similar.
+* `onInputCapture`: Uma versão de `onInput` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Uma função de [manipulador de `Event`](/reference/react-dom/components/common#event-handler). Dispara se uma entrada falha na validação ao enviar o formulário. Diferente do evento `invalid` nativo, o evento `onInvalid` do React é propagado.
+* `onInvalidCapture`: Uma versão de `onInvalid` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#required): Um booleano. Se `true`, o valor deve ser fornecido para o envio do formulário.
+* [`size`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select#size): Um número. Para selects `multiple={true}` selects, especifica o número preferencial de itens visíveis inicialmente.
 
-#### Caveats {/*caveats*/}
+#### Ressalvas {/*caveats*/}
 
-- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
-- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
-- 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.
+- Diferente do HTML, passar um atributo `selected` para `<option>` não é suportado. Em vez disso, use [`<select defaultValue>`](#providing-an-initially-selected-option) para caixas de seleção não controladas e [`<select value>`](#controlling-a-select-box-with-a-state-variable) para caixas de seleção controladas.
+- Se uma caixa de seleção receber a prop `value`, ela será [tratada como controlada.](#controlling-a-select-box-with-a-state-variable)
+- Uma caixa de seleção não pode ser simultaneamente controlada e não controlada.
+- Uma caixa de seleção não pode alternar entre ser controlada e não controlada durante sua vida útil.
+- Toda caixa de seleção controlada precisa de um manipulador de eventos `onChange` que atualize seu valor de forma síncrona.
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Exibindo uma caixa de seleção com opções {/*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.
+Renderize um `<select>` com uma lista de componentes `<option>` dentro para exibir uma caixa de seleção. Dê a cada `<option>` um `value` que represente os dados a serem enviados com o formulário.
 
 <Sandpack>
 
@@ -88,11 +88,11 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Escolha uma fruta:
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
+        <option value="apple">Maçã</option>
         <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="orange">Laranja</option>
       </select>
     </label>
   );
@@ -107,9 +107,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Fornecendo um rótulo para uma caixa de seleção {/*providing-a-label-for-a-select-box*/}
 
-Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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.
+Normalmente, você colocará cada `<select>` dentro de uma tag [`<label>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/label). Isso informa ao navegador que esse rótulo está associado a essa caixa de seleção. Quando o usuário clica no rótulo, o navegador automaticamente foca na caixa de seleção. Isso também é essencial para acessibilidade: um leitor de tela anunciará a legenda do rótulo quando o usuário focar na caixa de seleção.
 
 If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
 

From 4ec4e0048ace87635143348f7492d242013a7f3d Mon Sep 17 00:00:00 2001
From: Enricco Gemha <enriccogemha@gmail.com>
Date: Thu, 7 Nov 2024 16:43:11 -0300
Subject: [PATCH 2/2] =?UTF-8?q?Finaliza=20tradu=C3=A7=C3=A3o=20de=20`selec?=
 =?UTF-8?q?t.md`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reference/react-dom/components/select.md  | 120 +++++++++---------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index f7b6fe65c..9477e9994 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -111,7 +111,7 @@ select { margin: 5px; }
 
 Normalmente, você colocará cada `<select>` dentro de uma tag [`<label>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/label). Isso informa ao navegador que esse rótulo está associado a essa caixa de seleção. Quando o usuário clica no rótulo, o navegador automaticamente foca na caixa de seleção. Isso também é essencial para acessibilidade: um leitor de tela anunciará a legenda do rótulo quando o usuário focar na caixa de seleção.
 
-If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Se não puder aninhar `<select>` dentro de um `<label>`, associe-os passando o mesmo ID para `<select id>` e [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Para evitar conflitos entre múltiplas instâncias de um componente, gere um ID com [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -123,21 +123,21 @@ export default function Form() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Escolha uma fruta:
         <select name="selectedFruit">
-          <option value="apple">Apple</option>
+          <option value="apple">Maçã</option>
           <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="orange">Laranja</option>
         </select>
       </label>
       <hr />
       <label htmlFor={vegetableSelectId}>
-        Pick a vegetable:
+        Escolha um vegetal:
       </label>
       <select id={vegetableSelectId} name="selectedVegetable">
-        <option value="cucumber">Cucumber</option>
-        <option value="corn">Corn</option>
-        <option value="tomato">Tomato</option>
+        <option value="cucumber">Pepino</option>
+        <option value="corn">Milho</option>
+        <option value="tomato">Tomate</option>
       </select>
     </>
   );
@@ -153,9 +153,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Fornecendo uma opção selecionada inicialmente {/*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.
+Por padrão, o navegador selecionará a primeira `<option>` na lista. Para selecionar uma opção diferente por padrão, passe o `value` dessa `<option>` como `defaultValue` para o elemento `<select>`.
 
 <Sandpack>
 
@@ -163,11 +163,11 @@ By default, the browser will select the first `<option>` in the list. To select
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Escolha uma fruta:
       <select name="selectedFruit" defaultValue="orange">
-        <option value="apple">Apple</option>
+        <option value="apple">Maçã</option>
         <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="orange">Laranja</option>
       </select>
     </label>
   );
@@ -182,15 +182,15 @@ select { margin: 5px; }
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Diferente do HTML, passar um atributo `selected` para uma `<option>` individual não é suportado.
 
 </Pitfall>
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Habilitando seleção múltipla {/*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.
+Passe `multiple={true}` para o `<select>` para permitir que o usuário selecione várias opções. Nesse caso, se você também especificar `defaultValue` para escolher as opções selecionadas inicialmente, ele deve ser um array.
 
 <Sandpack>
 
@@ -198,15 +198,15 @@ Pass `multiple={true}` to the `<select>` to let the user select multiple options
 export default function FruitPicker() {
   return (
     <label>
-      Pick some fruits:
+      Escolha algumas frutas:
       <select
         name="selectedFruit"
         defaultValue={['orange', 'banana']}
         multiple={true}
       >
-        <option value="apple">Apple</option>
+        <option value="apple">Maçã</option>
         <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="orange">Laranja</option>
       </select>
     </label>
   );
@@ -221,55 +221,55 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ---
 
-### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+### Lendo o valor da caixa de seleção ao enviar um formulário {/*reading-the-select-box-value-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 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)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Adicione um [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) em torno da sua caixa de seleção com um [`<button type="submit">`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/button) dentro. Isso chamará o manipulador de evento `<form onSubmit>`. Por padrão, o navegador enviará os dados do formulário para a URL atual e recarregará a página. Você pode substituir esse comportamento chamando `e.preventDefault()`. Leia os dados do formulário com [`new FormData(e.target)`](https://developer.mozilla.org/pt-BR/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Impede o navegador de recarregar a página
     e.preventDefault();
-    // Read the form data
+    // Lê os dados do formulário
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+    // Você pode passar formData diretamente como corpo de uma requisição fetch:
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+    // Você pode gerar uma URL a partir disso, como o navegador faz por padrão:
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+    // Você pode trabalhar com isso como um objeto simples.
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) This doesn't include multiple select values
-    // Or you can get an array of name-value pairs.
+    console.log(formJson); // (!) Isso não inclui valores de seleção múltipla
+    // Ou você pode obter um array de pares de nome e valor.
     console.log([...formData.entries()]);
   }
 
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Pick your favorite fruit:
+        Escolha sua fruta favorita:
         <select name="selectedFruit" defaultValue="orange">
-          <option value="apple">Apple</option>
+          <option value="apple">Maçã</option>
           <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="orange">Laranja</option>
         </select>
       </label>
       <label>
-        Pick all your favorite vegetables:
+        Escolha todos os seus vegetais favoritos:
         <select
           name="selectedVegetables"
           multiple={true}
           defaultValue={['corn', 'tomato']}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Pepino</option>
+          <option value="corn">Milho</option>
+          <option value="tomato">Tomate</option>
         </select>
       </label>
       <hr />
-      <button type="reset">Reset</button>
-      <button type="submit">Submit</button>
+      <button type="reset">Redefinir</button>
+      <button type="submit">Enviar</button>
     </form>
   );
 }
@@ -284,44 +284,44 @@ label { margin-bottom: 20px; }
 
 <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" }`.
+Atribua um `name` ao seu `<select>`, por exemplo `<select name="selectedFruit" />`. O `name` que você especificou será usado como uma chave nos dados do formulário, por exemplo `{ selectedFruit: "orange" }`.
 
-If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/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.
+Se você usar `<select multiple={true}>`, o [`FormData`](https://developer.mozilla.org/pt-BR/docs/Web/API/FormData) que você lerá do formulário incluirá cada valor selecionado como um par de nome e valor separado. Observe atentamente os logs do console no exemplo acima.
 
 </Note>
 
 <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">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Por padrão, *qualquer* `<button>` dentro de um `<form>` irá submetê-lo. Isso pode ser surpreendente! Se você tiver seu próprio componente `Button` no React, considere retornar [`<button type="button">`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input/button) em vez de `<button>`. Então, para ser explícito, use `<button type="submit">` para botões que *devem* submeter o formulário.
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Controlando uma caixa de seleção com uma variável de estado {/*controlling-a-select-box-with-a-state-variable*/}
 
-A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+Uma caixa de seleção como `<select />` é *não controlada.* Mesmo se você [passar um valor selecionado inicialmente](#providing-an-initially-selected-option) como `<select defaultValue="orange" />`, seu JSX apenas especifica o valor inicial, não o valor atual.
 
-**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:](/reference/react/useState)
+**Para renderizar uma caixa de seleção _controlada_, passe a prop `value` para ela.** O React forçará a caixa de seleção a sempre ter o `value` que você passou. Normalmente, você controlará uma caixa de seleção declarando uma [variável de estado:](/reference/react/useState)
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declara uma variável de estado...
   // ...
   return (
     <select
-      value={selectedFruit} // ...force the select's value to match the state variable...
-      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+      value={selectedFruit} // ...força o valor do select a coincidir com a variável de estado...
+      onChange={e => setSelectedFruit(e.target.value)} // ...e atualiza a variável de estado a cada alteração!
     >
-      <option value="apple">Apple</option>
+      <option value="apple">Maçã</option>
       <option value="banana">Banana</option>
-      <option value="orange">Orange</option>
+      <option value="orange">Laranja</option>
     </select>
   );
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+Isso é útil se você deseja re-renderizar alguma parte da interface em resposta a cada seleção.
 
 <Sandpack>
 
@@ -334,19 +334,19 @@ export default function FruitPicker() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Escolha uma fruta:
         <select
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}
         >
-          <option value="apple">Apple</option>
+          <option value="apple">Maçã</option>
           <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="orange">Laranja</option>
         </select>
       </label>
       <hr />
       <label>
-        Pick all your favorite vegetables:
+        Escolha todos os seus vegetais favoritos:
         <select
           multiple={true}
           value={selectedVegs}
@@ -356,14 +356,14 @@ export default function FruitPicker() {
             setSelectedVegs(values);
           }}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Pepino</option>
+          <option value="corn">Milho</option>
+          <option value="tomato">Tomate</option>
         </select>
       </label>
       <hr />
-      <p>Your favorite fruit: {selectedFruit}</p>
-      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+      <p>Sua fruta favorita: {selectedFruit}</p>
+      <p>Seus vegetais favoritos: {selectedVegs.join(', ')}</p>
     </>
   );
 }
@@ -377,8 +377,8 @@ select { margin-bottom: 10px; display: block; }
 
 <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.
+**Se você passar `value` sem `onChange`, será impossível selecionar uma opção.** Quando você controla uma caixa de seleção, passando um `value` para ela, você *força* a caixa de seleção a sempre manter o valor passado. Portanto, se você passar uma variável de estado como `value`, mas esquecer de atualizar essa variável de estado de forma síncrona no manipulador de evento `onChange`, o React reverterá a caixa de seleção após cada tecla pressionada para o `value` que você especificou.
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Diferente do HTML, passar um atributo `selected` para uma `<option>` individual não é suportado.
 
 </Pitfall>