From 7783ba56c1cf7212cafa299befa621a783938bb1 Mon Sep 17 00:00:00 2001
From: Nivaldo Farias <badivia.f@gmail.com>
Date: Mon, 20 Jan 2025 16:50:06 -0300
Subject: [PATCH] Translate `input.md` to pt-br

---
 .../reference/react-dom/components/input.md   | 333 +++++++++---------
 1 file changed, 166 insertions(+), 167 deletions(-)

diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 706b8ae8a..aac787e9b 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -4,7 +4,7 @@ title: "<input>"
 
 <Intro>
 
-The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you render different kinds of form inputs.
+O componente de `<input>` [embarcado no navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) permite renderizar diferentes tipos de entradas de formulário.
 
 ```js
 <input />
@@ -16,100 +16,100 @@ The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/d
 
 ---
 
-## Reference {/*reference*/}
+## Referência {/*reference*/}
 
 ### `<input>` {/*input*/}
 
-To display an input, render the [built-in browser `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) component.
+Para exibir uma entrada, renderize o componente de `<input>` [embarcado no navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
 
 ```js
 <input name="myInput" />
 ```
 
-[See more examples below.](#usage)
+[Veja mais exemplos abaixo.](#usage)
 
 #### Props {/*props*/}
 
-`<input>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<input>` suporta todas as [props de elemento comuns.](/reference/react-dom/components/common#props)
 
 <Canary>
 
-React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React, `formAction` works only as a [built-in browser HTML component](/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+As extensões do React para a prop `formAction` estão atualmente disponíveis apenas nos canais Canary e experimentais do React. Nas versões estáveis do React, `formAction` funciona apenas como um [componente HTML embutido do navegador](/reference/react-dom/components#all-html-components). Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).
 
 </Canary>
 
-[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
-
-You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
-
-* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): A string. For a text input, controls its text. (For a radio button, specifies its form data.)
-
-When you pass either of them, you must also pass an `onChange` handler that updates the passed value.
-
-These `<input>` props are only relevant for uncontrolled inputs:
-
-* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): A boolean. Specifies [the initial value](#providing-an-initial-value-for-an-input) for `type="checkbox"` and `type="radio"` inputs.
-* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): A string. Specifies [the initial value](#providing-an-initial-value-for-an-input) for a text input.
-
-These `<input>` props are relevant both for uncontrolled and controlled inputs:
-
-* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): A string. Specifies which filetypes are accepted by a `type="file"` input.
-* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): A string. Specifies the alternative image text for a `type="image"` input.
-* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): A string. Specifies the media (microphone, video, or camera) captured by a `type="file"` input.
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#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/input#autofocus): A boolean. If `true`, React will focus the element on mount.
-* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): A string. Specifies the form field name for the element's directionality.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
-* `children`: `<input>` does not accept children.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
-* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string. Overrides the parent `<form action>` for `type="submit"` and `type="image"`.
-* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): A string. Overrides the parent `<form enctype>` for `type="submit"` and `type="image"`.
-* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): A string. Overrides the parent `<form method>` for `type="submit"` and `type="image"`.
-* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): A string. Overrides the parent `<form noValidate>` for `type="submit"` and `type="image"`.
-* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): A string. Overrides the parent `<form target>` for `type="submit"` and `type="image"`.
-* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): A string. Specifies the image height for `type="image"`.
-* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): A string. Specifies the `id` of the `<datalist>` with the autocomplete options.
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): A number. Specifies the maximum value of numerical and datetime inputs.
-* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): A number. Specifies the maximum length of text and other inputs.
-* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): A number. Specifies the minimum value of numerical and datetime inputs.
-* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): A number. Specifies the minimum length of text and other inputs.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): A boolean. Specifies whether multiple values are allowed for `<type="file"` and `type="email"`.
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-input-values-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled inputs.](#controlling-an-input-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). 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)
-* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<input>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
-* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): A string. Specifies the pattern that the `value` must match.
-* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): A string. Displayed in a dimmed color when the input value is empty.
-* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): A boolean. If `true`, the input is not editable by the user.
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#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/input#size): A number. Similar to setting width, but the unit depends on the control.
-* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): A string. Specifies the image source for a `type="image"` input.
-* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): A positive number or an `'any'` string. Specifies the distance between valid values.
-* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): A string. One of the [input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
-* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  A string. Specifies the image width for a `type="image"` input.
-
-#### Caveats {/*caveats*/}
-
-- Checkboxes need `checked` (or `defaultChecked`), not `value` (or `defaultValue`).
-- If a text input receives a string `value` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
-- If a checkbox or a radio button receives a boolean `checked` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
-- An input can't be both controlled and uncontrolled at the same time.
-- An input cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled input needs an `onChange` event handler that synchronously updates its backing value.
+[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Uma string ou função. Substitui a `<form action>` do pai para `type="submit"` e `type="image"`. Quando uma URL é passada para `action`, o formulário se comportará como um formulário HTML padrão. Quando uma função é passada para `formAction`, a função lidará com a submissão do formulário. Veja [`<form action>`](/reference/react-dom/components/form#props).
+
+Você pode [tornar um input controlado](#controlling-an-input-with-a-state-variable) passando uma dessas props:
+
+* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): Um booleano. Para uma entrada de checkbox ou um botão de rádio, controla se ele está selecionado.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): Uma string. Para uma entrada de texto, controla seu texto. (Para um botão de rádio, especifica seus dados de formulário.)
+
+Ao passar qualquer um deles, você também deve passar um manipulador `onChange` que atualiza o valor passado.
+
+Essas props `<input>` são relevantes apenas para entradas não controladas:
+
+* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): Um booleano. Especifica [o valor inicial](#providing-an-initial-value-for-an-input) para entradas `type="checkbox"` e `type="radio"`.
+* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): Uma string. Especifica [o valor inicial](#providing-an-initial-value-for-an-input) para uma entrada de texto.
+
+Essas props `<input>` são relevantes tanto para entradas não controladas quanto controladas:
+
+* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): Uma string. Especifica quais tipos de arquivos são aceitos por uma entrada `type="file"`.
+* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): Uma string. Especifica o texto alternativo da imagem para uma entrada `type="image"`.
+* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): Uma string. Especifica a mídia (microfone, vídeo ou câmera) capturada por uma entrada `type="file"`.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete): Uma string. Especifica um dos possíveis [comportamentos de autocomplete.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus): Um booleano. Se `true`, o React irá focar o elemento na montagem.
+* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): Uma string. Especifica o nome do campo do formulário para a direcionalidade do elemento.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): Um booleano. Se `true`, a entrada não será interativa e aparecerá desbotada.
+* `children`: `<input>` não aceita filhos.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): Uma string. Especifica o `id` da `<form>` à qual esta entrada pertence. Se omitido, é o formulário pai mais próximo.
+* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Uma string. Substitui a `<form action>` do pai para `type="submit"` e `type="image"`.
+* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): Uma string. Substitui a `<form enctype>` do pai para `type="submit"` e `type="image"`.
+* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): Uma string. Substitui a `<form method>` do pai para `type="submit"` e `type="image"`.
+* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): Uma string. Substitui a `<form noValidate>` do pai para `type="submit"` e `type="image"`.
+* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): Uma string. Substitui a `<form target>` do pai para `type="submit"` e `type="image"`.
+* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): Uma string. Especifica a altura da imagem para `type="image"`.
+* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): Uma string. Especifica o `id` do `<datalist>` com as opções de autocomplete.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): Um número. Especifica o valor máximo de entradas numéricas e de data/hora.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): Um número. Especifica o comprimento máximo de texto e outras entradas.
+* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): Um número. Especifica o valor mínimo de entradas numéricas e de data/hora.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): Um número. Especifica o comprimento mínimo de texto e outras entradas.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): Um booleano. Especifica se múltiplos valores são permitidos para `<type="file"` e `type="email"`.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): Uma string. Especifica o nome desta entrada que será [submetido com o formulário.](#reading-the-input-values-when-submitting-a-form)
+* `onChange`: Uma função [`Event` handler](/reference/react-dom/components/common#event-handler). Necessária para [entradas controladas.](#controlling-an-input-with-a-state-variable) Dispara imediatamente quando o valor do input é alterado pelo usuário (por exemplo, dispara a cada tecla pressionada). Comporta-se como o evento [`input` do navegador.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: Uma versão de `onChange` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Uma função [`Event` handler](/reference/react-dom/components/common#event-handler). Dispara imediatamente quando o valor é alterado pelo usuário. Por razões históricas, no React é idiomático usar `onChange`, que funciona de forma semelhante.
+* `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 [`Event` handler](/reference/react-dom/components/common#event-handler). Dispara se uma entrada falhar na validação ao enviar o formulário. Ao contrário do evento `invalid` embutido, o evento React `onInvalid` propaga.
+* `onInvalidCapture`: Uma versão de `onInvalid` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): Uma função [`Event` handler](/reference/react-dom/components/common#event-handler). Dispara após a seleção dentro do `<input>` mudar. O React estende o evento `onSelect` para também disparar para seleção vazia e em edições (que podem afetar a seleção).
+* `onSelectCapture`: Uma versão de `onSelect` que dispara na [fase de captura.](/learn/responding-to-events#capture-phase-events)
+* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): Uma string. Especifica o padrão que o `value` deve corresponder.
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): Uma string. Exibida em uma cor desbotada quando o valor do input está vazio.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): Um booleano. Se `true`, a entrada não pode ser editada pelo usuário.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required): Um booleano. Se `true`, o valor deve ser fornecido para que o formulário seja enviado.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size): Um número. Semelhante a definir a largura, mas a unidade depende do controle.
+* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): Uma string. Especifica a fonte da imagem para uma entrada `type="image"`.
+* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): Um número positivo ou uma string `'any'`. Especifica a distância entre valores válidos.
+* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): Uma string. Um dos [tipos de entrada.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  Uma string. Especifica a largura da imagem para uma entrada `type="image"`.
+
+#### Ressalvas {/*caveats*/}
+
+- Checkboxes necessitam de `checked` (ou `defaultChecked`), não `value` (ou `defaultValue`).
+- Se uma entrada de texto receber uma prop `value` string, ela será [tratada como controlada.](#controlling-an-input-with-a-state-variable)
+- Se um checkbox ou um botão de rádio receber uma prop `checked` booleano, ele será [tratado como controlado.](#controlling-an-input-with-a-state-variable)
+- Um input não pode ser controlado e não controlado ao mesmo tempo.
+- Um input não pode alternar entre ser controlado ou não controlado ao longo de sua vida útil.
+- Cada input controlado precisa de um manipulador de eventos `onChange` que atualiza sincronicamente seu valor de suporte.
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-### Displaying inputs of different types {/*displaying-inputs-of-different-types*/}
+### Exibindo inputs de diferentes tipos {/*displaying-inputs-of-different-types*/}
 
-To display an input, render an `<input>` component. By default, it will be a text input. You can pass `type="checkbox"` for a checkbox, `type="radio"` for a radio button, [or one of the other input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+Para exibir uma entrada, renderize um componente `<input>`. Por padrão, será uma entrada de texto. Você pode passar `type="checkbox"` para um checkbox, `type="radio"` para um botão de rádio, [ou um dos outros tipos de entrada.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
 
 <Sandpack>
 
@@ -118,7 +118,7 @@ export default function MyForm() {
   return (
     <>
       <label>
-        Text input: <input name="myInput" />
+        Entrada de texto: <input name="myInput" />
       </label>
       <hr />
       <label>
@@ -126,18 +126,18 @@ export default function MyForm() {
       </label>
       <hr />
       <p>
-        Radio buttons:
+        Botões de rádio:
         <label>
           <input type="radio" name="myRadio" value="option1" />
-          Option 1
+          Opção 1
         </label>
         <label>
           <input type="radio" name="myRadio" value="option2" />
-          Option 2
+          Opção 2
         </label>
         <label>
           <input type="radio" name="myRadio" value="option3" />
-          Option 3
+          Opção 3
         </label>
       </p>
     </>
@@ -154,11 +154,11 @@ input { margin: 5px; }
 
 ---
 
-### Providing a label for an input {/*providing-a-label-for-an-input*/}
+### Fornecendo um rótulo para um input {/*providing-a-label-for-an-input*/}
 
-Typically, you will place every `<input>` 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 input. When the user clicks the label, the browser will automatically focus the input. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the associated input.
+Normalmente, você colocará cada `<input>` dentro de uma tag [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label). Isso informa ao navegador que esse rótulo está associado a essa entrada. Quando o usuário clica no rótulo, o navegador automaticamente focará a entrada. Isso também é essencial para acessibilidade: um leitor de tela anunciará a legenda do rótulo quando o usuário focar na entrada associada.
 
-If you can't nest `<input>` into a `<label>`, associate them by passing the same ID to `<input 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 você não puder aninhar `<input>` dentro de um `<label>`, associe-os passando o mesmo ID para `<input id>` e [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Para evitar conflitos entre várias instâncias de um componente, gere tal ID com [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -170,11 +170,11 @@ export default function Form() {
   return (
     <>
       <label>
-        Your first name:
+        Seu primeiro nome:
         <input name="firstName" />
       </label>
       <hr />
-      <label htmlFor={ageInputId}>Your age:</label>
+      <label htmlFor={ageInputId}>Sua idade:</label>
       <input id={ageInputId} name="age" type="number" />
     </>
   );
@@ -189,9 +189,9 @@ input { margin: 5px; }
 
 ---
 
-### Providing an initial value for an input {/*providing-an-initial-value-for-an-input*/}
+### Fornecendo um valor inicial para um input {/*providing-an-initial-value-for-an-input*/}
 
-You can optionally specify the initial value for any input. Pass it as the `defaultValue` string for text inputs. Checkboxes and radio buttons should specify the initial value with the `defaultChecked` boolean instead.
+Você pode opcionalmente especificar o valor inicial para qualquer entrada. Passe-o como a string `defaultValue` para entradas de texto. Checkboxes e botões de rádio devem especificar o valor inicial com a prop `defaultChecked` booleano.
 
 <Sandpack>
 
@@ -200,7 +200,7 @@ export default function MyForm() {
   return (
     <>
       <label>
-        Text input: <input name="myInput" defaultValue="Some initial value" />
+        Entrada de texto: <input name="myInput" defaultValue="Algum valor inicial" />
       </label>
       <hr />
       <label>
@@ -208,10 +208,10 @@ export default function MyForm() {
       </label>
       <hr />
       <p>
-        Radio buttons:
+        Botões de rádio:
         <label>
           <input type="radio" name="myRadio" value="option1" />
-          Option 1
+          Opção 1
         </label>
         <label>
           <input
@@ -220,11 +220,11 @@ export default function MyForm() {
             value="option2"
             defaultChecked={true} 
           />
-          Option 2
+          Opção 2
         </label>
         <label>
           <input type="radio" name="myRadio" value="option3" />
-          Option 3
+          Opção 3
         </label>
       </p>
     </>
@@ -241,25 +241,25 @@ input { margin: 5px; }
 
 ---
 
-### Reading the input values when submitting a form {/*reading-the-input-values-when-submitting-a-form*/}
+### Lendo os valores de entrada ao enviar um formulário {/*reading-the-input-values-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your inputs 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) ao redor de suas entradas com um [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) dentro. Isso chamará seu evento `<form onSubmit>`. Por padrão, o navegador enviará os dados do formulário para a URL atual e atualizará 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/en-US/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function MyForm() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Impedir que o navegador recarregue a página
     e.preventDefault();
 
-    // Read the form data
+    // Ler 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 como um corpo de fetch diretamente:
     fetch('/some-api', { method: form.method, body: formData });
 
-    // Or you can work with it as a plain object:
+    // Ou você pode trabalhar com ele como um objeto simples:
     const formJson = Object.fromEntries(formData.entries());
     console.log(formJson);
   }
@@ -267,7 +267,7 @@ export default function MyForm() {
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Text input: <input name="myInput" defaultValue="Some initial value" />
+        Entrada de texto: <input name="myInput" defaultValue="Algum valor inicial" />
       </label>
       <hr />
       <label>
@@ -275,14 +275,14 @@ export default function MyForm() {
       </label>
       <hr />
       <p>
-        Radio buttons:
-        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
-        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
-        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
+        Botões de rádio:
+        <label><input type="radio" name="myRadio" value="option1" /> Opção 1</label>
+        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Opção 2</label>
+        <label><input type="radio" name="myRadio" value="option3" /> Opção 3</label>
       </p>
       <hr />
-      <button type="reset">Reset form</button>
-      <button type="submit">Submit form</button>
+      <button type="reset">Redefinir formulário</button>
+      <button type="submit">Enviar formulário</button>
     </form>
   );
 }
@@ -297,38 +297,38 @@ input { margin: 5px; }
 
 <Note>
 
-Give a `name` to every `<input>`, for example `<input name="firstName" defaultValue="Taylor" />`. The `name` you specified will be used as a key in the form data, for example `{ firstName: "Taylor" }`.
+Dê um `name` a cada `<input>`, por exemplo `<input name="firstName" defaultValue="Taylor" />`. O `name` que você especificou será usado como uma chave nos dados do formulário, por exemplo `{ firstName: "Taylor" }`.
 
 </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>` enviará o formulário. Isso pode ser surpreendente! Se você tiver seu próprio componente `Button` do React, considere retornar [`<button type="button">`](https://developer.mozilla.org/en-US/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 an input with a state variable {/*controlling-an-input-with-a-state-variable*/}
+### Controlando um input com uma variável de estado {/*controlling-an-input-with-a-state-variable*/}
 
-An input like `<input />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-an-input) like `<input defaultValue="Initial text" />`, your JSX only specifies the initial value. It does not control what the value should be right now.
+Um input como `<input />` é *não controlado.* Mesmo que você [passe um valor inicial](#providing-an-initial-value-for-an-input) como `<input defaultValue="Texto inicial" />`, seu JSX apenas especifica o valor inicial. Não controla qual deve ser o valor agora.
 
-**To render a _controlled_ input, pass the `value` prop to it (or `checked` for checkboxes and radios).** React will force the input to always have the `value` you passed. Usually, you would do this by declaring a [state variable:](/reference/react/useState)
+**Para renderizar um input _controlado_, passe a prop `value` para ele (ou `checked` para checkboxes e rádios).** O React forçará o input a sempre ter o `value` que você passou. Normalmente, você faria isso declarando uma [variável de estado:](/reference/react/useState)
 
 ```js {2,6,7}
 function Form() {
-  const [firstName, setFirstName] = useState(''); // Declare a state variable...
+  const [firstName, setFirstName] = useState(''); // Declare uma variável de estado...
   // ...
   return (
     <input
-      value={firstName} // ...force the input's value to match the state variable...
-      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
+      value={firstName} // ...forçar o valor do input a corresponder à variável de estado...
+      onChange={e => setFirstName(e.target.value)} // ... e atualizar a variável de estado em qualquer edição!
     />
   );
 }
 ```
 
-A controlled input makes sense if you needed state anyway--for example, to re-render your UI on every edit:
+Um input controlado faz sentido se você precisasse de estado de qualquer maneira--por exemplo, para re-renderizar sua UI em cada edição:
 
 ```js {2,9}
 function Form() {
@@ -336,14 +336,14 @@ function Form() {
   return (
     <>
       <label>
-        First name:
+        Primeiro nome:
         <input value={firstName} onChange={e => setFirstName(e.target.value)} />
       </label>
-      {firstName !== '' && <p>Your name is {firstName}.</p>}
+      {firstName !== '' && <p>Seu nome é {firstName}.</p>}
       ...
 ```
 
-It's also useful if you want to offer multiple ways to adjust the input state (for example, by clicking a button):
+É também útil se você quiser oferecer várias maneiras de ajustar o estado do input (por exemplo, clicando em um botão):
 
 ```js {3-4,10-11,14}
 function Form() {
@@ -353,18 +353,18 @@ function Form() {
   return (
     <>
       <label>
-        Age:
+        Idade:
         <input
           value={age}
           onChange={e => setAge(e.target.value)}
           type="number"
         />
         <button onClick={() => setAge(ageAsNumber + 10)}>
-          Add 10 years
+          Adicionar 10 anos
         </button>
 ```
 
-The `value` you pass to controlled components should not be `undefined` or `null`. If you need the initial value to be empty (such as with the `firstName` field below), initialize your state variable to an empty string (`''`).
+O `value` que você passa para componentes controlados não deve ser `undefined` ou `null`. Se você precisar que o valor inicial seja vazio (como no campo `firstName` abaixo), inicialize sua variável de estado como uma string vazia (`''`).
 
 <Sandpack>
 
@@ -378,28 +378,28 @@ export default function Form() {
   return (
     <>
       <label>
-        First name:
+        Primeiro nome:
         <input
           value={firstName}
           onChange={e => setFirstName(e.target.value)}
         />
       </label>
       <label>
-        Age:
+        Idade:
         <input
           value={age}
           onChange={e => setAge(e.target.value)}
           type="number"
         />
         <button onClick={() => setAge(ageAsNumber + 10)}>
-          Add 10 years
+          Adicionar 10 anos
         </button>
       </label>
       {firstName !== '' &&
-        <p>Your name is {firstName}.</p>
+        <p>Seu nome é {firstName}.</p>
       }
       {ageAsNumber > 0 &&
-        <p>Your age is {ageAsNumber}.</p>
+        <p>Sua idade é {ageAsNumber}.</p>
       }
     </>
   );
@@ -416,17 +416,17 @@ p { font-weight: bold; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to type into the input.** When you control an input 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 input after every keystroke back to the `value` that you specified.
+**Se você passar `value` sem `onChange`, será impossível digitar na entrada.** Quando você controla um input passando algum `value` para ele, você *força* ele a sempre ter o valor que você passou. Então, se você passar uma variável de estado como `value` mas esquecer de atualizar essa variável de estado sincronicamente durante o manipulador de eventos `onChange`, o React reverterá o input após cada tecla pressionada de volta para o `value` que você especificou.
 
 </Pitfall>
 
 ---
 
-### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+### Otimizando a re-renderização em cada tecla pressionada {/*optimizing-re-rendering-on-every-keystroke*/}
 
-When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There's a few ways you can optimize re-rendering performance.
+Quando você usa um input controlado, você define o estado em cada tecla pressionada. Se o componente que contém seu estado re-renderiza uma árvore grande, isso pode ficar lento. Existem algumas maneiras de otimizar o desempenho da re-renderização.
 
-For example, suppose you start with a form that re-renders all page content on every keystroke:
+Por exemplo, suponha que você comece com um formulário que re-renderiza todo o conteúdo da página a cada tecla pressionada:
 
 ```js {5-8}
 function App() {
@@ -442,7 +442,7 @@ function App() {
 }
 ```
 
-Since `<PageContent />` doesn't rely on the input state, you can move the input state into its own component:
+Como `<PageContent />` não depende do estado da entrada, você pode mover o estado da entrada para seu próprio componente:
 
 ```js {4,10-17}
 function App() {
@@ -464,140 +464,139 @@ function SignupForm() {
 }
 ```
 
-This significantly improves performance because now only `SignupForm` re-renders on every keystroke.
+Isso melhora significativamente o desempenho porque agora apenas o `SignupForm` re-renderiza a cada tecla pressionada.
 
-If there is no way to avoid re-rendering (for example, if `PageContent` depends on the search input's value), [`useDeferredValue`](/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) lets you keep the controlled input responsive even in the middle of a large re-render.
+Se não houver como evitar a re-renderização (por exemplo, se `PageContent` depender do valor da entrada de pesquisa), [`useDeferredValue`](/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) permite que você mantenha o input controlado responsivo mesmo no meio de uma grande re-renderização.
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## Solução de Problemas {/*troubleshooting*/}
 
-### My text input doesn't update when I type into it {/*my-text-input-doesnt-update-when-i-type-into-it*/}
+### Minha entrada de texto não atualiza quando digito nela {/*my-text-input-doesnt-update-when-i-type-into-it*/}
 
-If you render an input with `value` but no `onChange`, you will see an error in the console:
+Se você renderizar um input com `value` mas sem `onChange`, verá um erro no console:
 
 ```js
-// 🔴 Bug: controlled text input with no onChange handler
+// 🔴 Bug: entrada de texto controlada sem manipulador onChange
 <input value={something} />
 ```
 
 <ConsoleBlock level="error">
 
-You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
+Você forneceu uma prop `value` a um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deveria ser mutável, use `defaultValue`. Caso contrário, defina `onChange` ou `readOnly`.
 
 </ConsoleBlock>
 
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultValue` instead:
+Como a mensagem de erro sugere, se você apenas quisesse [especificar o *valor inicial,](#providing-an-initial-value-for-an-input) passe `defaultValue` em vez disso:
 
 ```js
-// ✅ Good: uncontrolled input with an initial value
+// ✅ Bom: entrada não controlada com um valor inicial
 <input defaultValue={something} />
 ```
 
-If you want [to control this input with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+Se você quiser [controlar esse input com uma variável de estado,](#controlling-an-input-with-a-state-variable) especifique um manipulador `onChange`:
 
 ```js
-// ✅ Good: controlled input with onChange
+// ✅ Bom: entrada controlada com onChange
 <input value={something} onChange={e => setSomething(e.target.value)} />
 ```
 
-If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+Se o valor for intencionalmente somente leitura, adicione uma prop `readOnly` para suprimir o erro:
 
 ```js
-// ✅ Good: readonly controlled input without on change
+// ✅ Bom: entrada controlada somente leitura sem on change
 <input value={something} readOnly={true} />
 ```
 
 ---
 
-### My checkbox doesn't update when I click on it {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
+### Meu checkbox não atualiza quando clico nele {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
 
-If you render a checkbox with `checked` but no `onChange`, you will see an error in the console:
+Se você renderizar um checkbox com `checked` mas sem `onChange`, verá um erro no console:
 
 ```js
-// 🔴 Bug: controlled checkbox with no onChange handler
+// 🔴 Bug: checkbox controlado sem manipulador onChange
 <input type="checkbox" checked={something} />
 ```
 
 <ConsoleBlock level="error">
 
-You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
+Você forneceu uma prop `checked` a um campo de formulário sem um manipulador `onChange`. Isso renderizará um campo somente leitura. Se o campo deveria ser mutável, use `defaultChecked`. Caso contrário, defina `onChange` ou `readOnly`.
 
 </ConsoleBlock>
 
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultChecked` instead:
+Como a mensagem de erro sugere, se você apenas quisesse [especificar o *valor inicial,](#providing-an-initial-value-for-an-input) passe `defaultChecked` em vez disso:
 
 ```js
-// ✅ Good: uncontrolled checkbox with an initial value
+// ✅ Bom: checkbox não controlado com um valor inicial
 <input type="checkbox" defaultChecked={something} />
 ```
 
-If you want [to control this checkbox with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+Se você quiser [controlar esse checkbox com uma variável de estado,](#controlling-an-input-with-a-state-variable) especifique um manipulador `onChange`:
 
 ```js
-// ✅ Good: controlled checkbox with onChange
+// ✅ Bom: checkbox controlado com onChange
 <input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} />
 ```
 
 <Pitfall>
 
-You need to read `e.target.checked` rather than `e.target.value` for checkboxes.
+Você precisa ler `e.target.checked` em vez de `e.target.value` para checkboxes.
 
 </Pitfall>
 
-If the checkbox is intentionally read-only, add a `readOnly` prop to suppress the error:
+Se o checkbox for intencionalmente somente leitura, adicione uma prop `readOnly` para suprimir o erro:
 
 ```js
-// ✅ Good: readonly controlled input without on change
+// ✅ Bom: entrada controlada somente leitura sem on change
 <input type="checkbox" checked={something} readOnly={true} />
 ```
 
 ---
 
-### My input caret jumps to the beginning on every keystroke {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
+### Meu cursor de entrada salta para o início a cada tecla pressionada {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
 
-If you [control an input,](#controlling-an-input-with-a-state-variable) you must update its state variable to the input's value from the DOM during `onChange`.
+Se você [controla um input,](#controlling-an-input-with-a-state-variable) deve atualizar sua variável de estado para o valor do input do DOM durante `onChange`.
 
-You can't update it to something other than `e.target.value` (or `e.target.checked` for checkboxes):
+Você não pode atualizá-lo para algo diferente de `e.target.value` (ou `e.target.checked` para checkboxes):
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input to something other than e.target.value
+  // 🔴 Bug: atualizando um input para algo diferente de e.target.value
   setFirstName(e.target.value.toUpperCase());
 }
 ```
 
-You also can't update it asynchronously:
+Você também não pode atualizá-lo de forma assíncrona:
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input asynchronously
+  // 🔴 Bug: atualizando um input de forma assíncrona
   setTimeout(() => {
     setFirstName(e.target.value);
   }, 100);
 }
 ```
 
-To fix your code, update it synchronously to `e.target.value`:
+Para corrigir seu código, atualize-o sincronicamente para `e.target.value`:
 
 ```js
 function handleChange(e) {
-  // ✅ Updating a controlled input to e.target.value synchronously
+  // ✅ Atualizando um input controlado para e.target.value sincronicamente
   setFirstName(e.target.value);
 }
 ```
 
-If this doesn't fix the problem, it's possible that the input gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render, for example if the input or one of its parents always receives a different `key` attribute, or if you nest component function definitions (which is not supported and causes the "inner" component to always be considered a different tree).
+Se isso não resolver o problema, é possível que o input esteja sendo removido e re-adicionado do DOM a cada tecla pressionada. Isso pode acontecer se você acidentalmente [resetar o estado](/learn/preserving-and-resetting-state) a cada re-renderização, por exemplo, se o input ou um de seus pais sempre recebe um atributo `key` diferente, ou se você aninhar definições de funções de componentes (o que não é suportado e faz com que o "componente interno" sempre seja considerado uma árvore diferente).
 
 ---
 
-### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+### Estou recebendo um erro: "Um componente está mudando um input não controlado para ser controlado" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
 
+Se você fornecer um `value` ao componente, ele deve permanecer uma string durante toda a sua vida útil.
 
-If you provide a `value` to the component, it must remain a string throughout its lifetime.
+Você não pode passar `value={undefined}` primeiro e depois passar `value="alguma string"` porque o React não saberá se você deseja que o componente seja não controlado ou controlado. Um componente controlado deve sempre receber um `value` string, não `null` ou `undefined`.
 
-You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+Se seu `value` estiver vindo de uma API ou de uma variável de estado, ele pode ser inicializado como `null` ou `undefined`. Nesse caso, ou o defina como uma string vazia (`''`) inicialmente, ou passe `value={someValue ?? ''}` para garantir que `value` seja uma string.
 
-If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
-
-Similarly, if you pass `checked` to a checkbox, ensure it's always a boolean.
+Da mesma forma, se você passar `checked` para um checkbox, certifique-se de que ele seja sempre um booleano.
\ No newline at end of file