From 80dddade3502fb992895c7e3ac66759c1f0971a9 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Mon, 14 Sep 2026 20:49:58 +0000
Subject: [PATCH 1/2] translate(reference): progress (#666) (#699)

Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
---
 .../react-dom/components/progress.md          | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index cc231890c..a775e351f 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -1,10 +1,17 @@
 ---
 title: "<progress>"
+translationStatus: ai-draft
 ---
 
+<Note>
+
+Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/components/progress.md).
+
+</Note>
+
 <Intro>
 
-The [built-in browser `<progress>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) lets you render a progress indicator.
+Il [componente browser integrato `<progress>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress) ti permette di renderizzare un indicatore di progresso.
 
 ```js
 <progress value={0.5} />
@@ -20,32 +27,32 @@ The [built-in browser `<progress>` component](https://developer.mozilla.org/en-U
 
 ### `<progress>` {/*progress*/}
 
-To display a progress indicator, render the [built-in browser `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) component.
+Per visualizzare un indicatore di progresso, renderizza il [componente browser integrato `<progress>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress).
 
 ```js
 <progress value={0.5} />
 ```
 
-[See more examples below.](#usage)
+[Vedi altri esempi sotto.](#usage)
 
 #### Props {/*props*/}
 
-`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+`<progress>` supporta tutte le [props comuni degli elementi.](/reference/react-dom/components/common#common-props)
 
-Additionally, `<progress>` supports these props:
+Inoltre, `<progress>` supporta queste props:
 
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
+* [`max`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress#max): Un numero. Specifica il `value` massimo. Predefinito: `1`.
+* [`value`](https://developer.mozilla.org/it/docs/Web/HTML/Element/progress#value): Un numero compreso tra `0` e `max`, oppure `null` per un progresso indeterminato. Specifica quanto è stato completato.
 
 ---
 
 ## Usage {/*usage*/}
 
-### Controlling a progress indicator {/*controlling-a-progress-indicator*/}
+### Controllare un indicatore di progresso {/*controlling-a-progress-indicator*/}
 
-To display a progress indicator, render a `<progress>` component. You can pass a number `value` between `0` and the `max` value you specify. If you don't pass a `max` value, it will assumed to be `1` by default.
+Per visualizzare un indicatore di progresso, renderizza un componente `<progress>`. Puoi passare un numero `value` compreso tra `0` e il valore di `max` che specifichi. Se non passi un valore `max`, viene assunto `1` per impostazione predefinita.
 
-If the operation is not ongoing, pass `value={null}` to put the progress indicator into an indeterminate state.
+Se l'operazione non è in corso, passa `value={null}` per mettere l'indicatore di progresso in uno stato indeterminato.
 
 <Sandpack>
 

From 21748e0ac4cb99968600409138f2c2f5723be2b5 Mon Sep 17 00:00:00 2001
From: Alessandro De Blasis <alex@deblasis.net>
Date: Mon, 14 Sep 2026 23:50:04 +0300
Subject: [PATCH 2/2] translate(reference): select (#667)

Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
---
 .../reference/react-dom/components/select.md  | 129 +++++++++---------
 1 file changed, 68 insertions(+), 61 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 72033ea0a..b95e90ded 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -1,10 +1,17 @@
 ---
 title: "<select>"
+translationStatus: ai-draft
 ---
 
+<Note>
+
+Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react-dom/components/select.md).
+
+</Note>
+
 <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.
+Il [componente browser integrato `<select>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select) ti permette di renderizzare una casella select con opzioni.
 
 ```js
 <select>
@@ -23,7 +30,7 @@ The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/
 
 ### `<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.
+Per visualizzare una casella select, renderizza il [componente browser integrato `<select>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select).
 
 ```js
 <select>
@@ -32,55 +39,55 @@ To display a select box, render the [built-in browser `<select>`](https://develo
 </select>
 ```
 
-[See more examples below.](#usage)
+[Vedi altri esempi sotto.](#usage)
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+`<select>` supporta tutte le [props comuni degli elementi.](/reference/react-dom/components/common#common-props)
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Puoi [controllare una casella select](#controlling-a-select-box-with-a-state-variable) passando una 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`: Una stringa (o un array di stringhe per [`multiple={true}`](#enabling-multiple-selection)). Controlla quale opzione è selezionata. Ogni stringa del valore deve corrispondere al `value` di un `<option>` annidato dentro il `<select>`.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Quando passi `value`, devi anche passare un gestore di eventi `onChange` che aggiorni il valore passato.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Se il tuo `<select>` è non controllato, puoi passare invece la prop `defaultValue`:
 
-* `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`: Una stringa (o un array di stringhe per [`multiple={true}`](#enabling-multiple-selection)). Specifica [l'opzione inizialmente selezionata.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxes:
+Queste props di `<select>` sono rilevanti sia per caselle select non controllate che controllate:
 
-* [`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/it/docs/Web/HTML/Element/select#autocomplete): Una stringa. Specifica uno dei possibili [comportamenti di autocomplete.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#autofocus): Un booleano. Se `true`, React metterà a fuoco l'elemento al montaggio.
+* `children`: `<select>` accetta come children i componenti [`<option>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/optgroup) e [`<datalist>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/datalist). Puoi anche passare i tuoi componenti, purché alla fine renderizzino uno dei componenti consentiti. Se passi i tuoi componenti che alla fine renderizzano tag `<option>`, ogni `<option>` che renderizzi deve avere un `value`.
+* [`disabled`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#disabled): Un booleano. Se `true`, la casella select non sarà interattiva e apparirà attenuata.
+* [`form`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#form): Una stringa. Specifica l'`id` del `<form>` a cui appartiene questa casella select. Se omesso, è il form padre più vicino.
+* [`multiple`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#multiple): Un booleano. Se `true`, il browser consente la [selezione multipla.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#name): Una stringa. Specifica il nome di questa casella select che viene [inviato con il form.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: Una funzione [gestore di `Event`](/reference/react-dom/components/common#event-handler). Obbligatorio per [caselle select controllate.](#controlling-a-select-box-with-a-state-variable) Scatta immediatamente quando l'utente sceglie un'opzione diversa. Si comporta come l'[evento `input` del browser.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: Una versione di `onChange` che scatta nella [fase di capture.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Una funzione [gestore di `Event`](/reference/react-dom/components/common#event-handler). Scatta immediatamente quando il valore viene modificato dall'utente. Per ragioni storiche, in React è idiomatico usare `onChange` al suo posto, che funziona in modo simile.
+* `onInputCapture`: Una versione di `onInput` che scatta nella [fase di capture.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Una funzione [gestore di `Event`](/reference/react-dom/components/common#event-handler). Scatta se un input non supera la validazione all'invio del form. A differenza dell'evento `invalid` integrato, l'evento React `onInvalid` fa bubbling.
+* `onInvalidCapture`: Una versione di `onInvalid` che scatta nella [fase di capture.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#required): Un booleano. Se `true`, il valore deve essere fornito affinché il form possa essere inviato.
+* [`size`](https://developer.mozilla.org/it/docs/Web/HTML/Element/select#size): Un numero. Per select con `multiple={true}`, specifica il numero preferito di elementi inizialmente visibili.
 
 #### Caveats {/*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.
+- A differenza dell'HTML, passare un attributo `selected` a `<option>` non è supportato. Usa invece [`<select defaultValue>`](#providing-an-initially-selected-option) per caselle select non controllate e [`<select value>`](#controlling-a-select-box-with-a-state-variable) per caselle select controllate.
+- Se una casella select riceve una prop `value`, verrà [trattata come controllata.](#controlling-a-select-box-with-a-state-variable)
+- Una casella select non può essere contemporaneamente controllata e non controllata.
+- Una casella select non può passare da controllata a non controllata (o viceversa) nel corso della sua vita.
+- Ogni casella select controllata necessita di un gestore di eventi `onChange` che aggiorni in modo sincrono il valore sottostante.
 
 ---
 
 ## Usage {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Visualizzare una casella di selezione con opzioni {/*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.
+Renderizza un `<select>` con un elenco di componenti `<option>` al suo interno per visualizzare una casella select. Assegna a ogni `<option>` un `value` che rappresenta i dati da inviare con il form.
 
 <Sandpack>
 
@@ -107,11 +114,11 @@ select { margin: 5px; }
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Fornire un'etichetta per una casella di selezione {/*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.
+Di solito, posizionerai ogni `<select>` dentro un tag [`<label>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/label). Questo indica al browser che questa etichetta è associata a quella casella select. Quando l'utente clicca sull'etichetta, il browser metterà automaticamente a fuoco la casella select. È anche essenziale per l'accessibilità: uno screen reader annuncerà la didascalia dell'etichetta quando l'utente mette a fuoco la casella select.
 
-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 non puoi annidare `<select>` dentro un `<label>`, associali passando lo stesso ID a `<select id>` e [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Per evitare conflitti tra più istanze dello stesso componente, genera un ID del genere con [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -153,9 +160,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Fornire un'opzione inizialmente selezionata {/*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.
+Per impostazione predefinita, il browser selezionerà il primo `<option>` nell'elenco. Per selezionare un'opzione diversa di default, passa il `value` di quell'`<option>` come `defaultValue` all'elemento `<select>`.
 
 <Sandpack>
 
@@ -182,15 +189,15 @@ select { margin: 5px; }
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+A differenza dell'HTML, passare un attributo `selected` a un singolo `<option>` non è supportato.
 
 </Pitfall>
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Abilitare la selezione multipla {/*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.
+Passa `multiple={true}` al `<select>` per consentire all'utente di selezionare più opzioni. In quel caso, se specifichi anche `defaultValue` per scegliere le opzioni inizialmente selezionate, deve essere un array.
 
 <Sandpack>
 
@@ -221,27 +228,27 @@ 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*/}
+### Leggere il valore della casella di selezione all'invio di un form {/*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).
+Aggiungi un [`<form>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/form) intorno alla tua casella select con un [`<button type="submit">`](https://developer.mozilla.org/it/docs/Web/HTML/Element/button) al suo interno. Invocherà il tuo gestore di eventi `<form onSubmit>`. Per impostazione predefinita, il browser invierà i dati del form all'URL corrente e ricaricherà la pagina. Puoi sovrascrivere questo comportamento chiamando `e.preventDefault()`. Leggi i dati del form con [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Impedisci al browser di ricaricare la pagina
     e.preventDefault();
-    // Read the form data
+    // Leggi i dati del form
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+    // Puoi passare formData come body di fetch direttamente:
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+    // Puoi generare un URL da esso, come fa il browser di default:
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+    // Puoi lavorarci come con un oggetto semplice.
     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); // (!) Questo non include i valori di select multipli
+    // Oppure puoi ottenere un array di coppie nome-valore.
     console.log([...formData.entries()]);
   }
 
@@ -284,34 +291,34 @@ 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" }`.
+Assegna un `name` al tuo `<select>`, ad esempio `<select name="selectedFruit" />`. Il `name` che hai specificato verrà usato come chiave nei dati del form, ad esempio `{ 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 usi `<select multiple={true}>`, il [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) che leggerai dal form includerà ogni valore selezionato come coppia nome-valore separata. Osserva attentamente i log della console nell'esempio sopra.
 
 </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.
+Per impostazione predefinita, *qualsiasi* `<button>` dentro un `<form>` lo invierà. Questo può sorprendere! Se hai un tuo componente React `Button` personalizzato, considera di restituire [`<button type="button">`](https://developer.mozilla.org/it/docs/Web/HTML/Element/input/button) invece di `<button>`. Poi, per essere esplicito, usa `<button type="submit">` per i pulsanti che *devono* inviare il form.
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Controllare una casella di selezione con una variabile di state {/*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.
+Una casella select come `<select />` è *non controllata.* Anche se [passi un valore inizialmente selezionato](#providing-an-initially-selected-option) come `<select defaultValue="orange" />`, il tuo JSX specifica solo il valore iniziale, non il valore attuale.
 
-**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)
+**Per renderizzare una casella select _controllata_, passa la prop `value`.** React forzerà la casella select ad avere sempre il `value` che hai passato. Di solito, controllerai una casella select dichiarando una [variabile di state:](/reference/react/useState)
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Dichiara una variabile di state...
   // ...
   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} // ...forza il valore del select a corrispondere alla variabile di state...
+      onChange={e => setSelectedFruit(e.target.value)} // ... e aggiorna la variabile di state a ogni modifica!
     >
       <option value="apple">Apple</option>
       <option value="banana">Banana</option>
@@ -321,7 +328,7 @@ function FruitPicker() {
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+Questo è utile se vuoi ri-renderizzare una parte dell'UI in risposta a ogni selezione.
 
 <Sandpack>
 
@@ -377,8 +384,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 passi `value` senza `onChange`, sarà impossibile selezionare un'opzione.** Quando controlli una casella select passandogli un `value`, la *forzi* ad avere sempre il valore che hai passato. Quindi se passi una variabile di state come `value` ma dimentichi di aggiornare quella variabile di state in modo sincrono durante il gestore di eventi `onChange`, React ripristinerà la casella select dopo ogni battitura al `value` che hai specificato.
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+A differenza dell'HTML, passare un attributo `selected` a un singolo `<option>` non è supportato.
 
 </Pitfall>