Finaliza tradução de select.md

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,21 +153,21 @@ 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>
 
 ```js
 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,31 +182,31 @@ 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>
 
 ```js
 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>