> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio

<Frame>
  <img src="https://mintcdn.com/twenty/JIRRbviz5phT8G2L/images/user-guide/create-workspace/workspace-cover.png?fit=max&auto=format&n=JIRRbviz5phT8G2L&q=85&s=02024f4200aaf4b09a3b0caef02de198" alt="Intestazione" width="1440" height="680" data-path="images/user-guide/create-workspace/workspace-cover.png" />
</Frame>

Utilizzato quando gli utenti possono scegliere solo un'opzione da una serie di opzioni.

<Tabs>
  <Tab title="Utilizzo">
    ```jsx theme={null}
    import { Radio } from "twenty-ui/display";

    export const MyComponent = () => {

      const handleRadioChange = (event) => {
        console.log("Radio button changed:", event.target.checked);
      };

      const handleCheckedChange = (checked) => {
        console.log("Checked state changed:", checked);
      };


      return (
        <Radio
          checked={true}
          value="Option 1"
          onChange={handleRadioChange}
          onCheckedChange={handleCheckedChange}
          size="large"
          disabled={false}
          labelPosition="right"
        />
      );
    };

    ```
  </Tab>

  <Tab title="Props">
    | Props              | Tipo                  | Descrizione                                                                                                  |
    | ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ |
    | stile              | proprietà `React.CSS` | Stili inline aggiuntivi per il componente                                                                    |
    | nomeClasse         | stringa               | Classe CSS opzionale per uno stile aggiuntivo                                                                |
    | selezionato        | booleano              | Indica se il pulsante di opzione è selezionato                                                               |
    | valore             | stringa               | L'etichetta o il testo associato al pulsante di opzione                                                      |
    | onChange           | funzione              | La funzione chiamata quando il pulsante di opzione selezionato cambia                                        |
    | onCheckedChange    | funzione              | La funzione chiamata quando cambia lo stato `selezionato` del pulsante di opzione                            |
    | dimensione         | stringa               | La dimensione del pulsante di opzione. Le opzioni includono: `grande` e `piccolo`                            |
    | disabilitato       | booleano              | Se `true`, il pulsante di opzione è disabilitato e non cliccabile                                            |
    | posizioneEtichetta | stringa               | La posizione del testo dell'etichetta rispetto al pulsante di opzione. Ha due opzioni: `sinistra` e `destra` |
  </Tab>
</Tabs>

## Gruppo di Radio

Raggruppa insieme pulsanti di opzione correlati.

<Tabs>
  <Tab title="Utilizzo">
    ```jsx theme={null}
    import React, { useState } from "react";
    import { Radio, RadioGroup } from "twenty-ui/display";

    export const MyComponent = () => {

      const [selectedValue, setSelectedValue] = useState("Option 1");

      const handleChange = (event) => {
        setSelectedValue(event.target.value);
      };
      
      return (
        <RadioGroup value={selectedValue} onChange={handleChange}>
          <Radio value="Option 1" />
          <Radio value="Option 2" />
          <Radio value="Option 3" />
        </RadioGroup>
      );
    };

    ```
  </Tab>

  <Tab title="Proprietà">
    | Proprietà     | Tipo              | Descrizione                                                                      |
    | ------------- | ----------------- | -------------------------------------------------------------------------------- |
    | valore        | stringa           | Il valore del pulsante di opzione attualmente selezionato                        |
    | onChange      | funzione          | La funzione di callback attivata quando il pulsante di opzione cambia            |
    | onValueChange | funzione          | La funzione di callback attivata quando cambia il valore selezionato nel gruppo. |
    | figli         | `React.ReactNode` | Consente di passare componenti React (come Radio) come figli al Gruppo di Radio  |
  </Tab>
</Tabs>