> ## 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.

# RadioGroup

> Gestisci una singola selezione tra un insieme di opzioni radio.

## Panoramica

`RadioGroup` coordina il valore, la navigazione tramite tastiera e l'invio del modulo dei relativi elementi figlio [Radio](https://docs.twenty.com/it/ui/primitives/input/radio.md).

**Light**

[Esempio di RadioGroup (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di RadioGroup (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-radiogroup--display)

## Utilizzo

### Stato non controllato.

Usa `defaultValue` per impostare la frequenza di fatturazione iniziale. Il gruppo gestisce le modifiche successive.

```tsx theme={null}
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const BillingFrequency = () => (
  <RadioGroup
    name="billingFrequency"
    defaultValue="monthly"
    aria-label="Billing frequency"
  >
    <Radio value="monthly">Monthly</Radio>
    <Radio value="yearly">Yearly</Radio>
  </RadioGroup>
);
```

Il `name` del gruppo identifica il valore selezionato nell'invio del modulo. Assegna al gruppo un nome accessibile, oltre a etichettare ogni opzione radio.

### Layout orizzontale

Per impostazione predefinita, i gruppi usano una colonna verticale. Imposta `orientation="horizontal"` per una riga. La prop controlla il layout visivo tramite `data-orientation`; non imposta `aria-orientation` né modifica la navigazione tramite tastiera. Sia i tasti freccia orizzontali sia quelli verticali mantengono il comportamento esistente di Base UI, inclusa la navigazione da destra a sinistra tramite [DirectionProvider](https://docs.twenty.com/it/ui/primitives/layout/direction-provider.md).

```tsx theme={null}
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const HorizontalBillingFrequency = () => (
  <RadioGroup
    orientation="horizontal"
    name="billingFrequency"
    defaultValue="monthly"
    aria-label="Billing frequency"
  >
    <Radio value="monthly">Monthly</Radio>
    <Radio value="yearly">Yearly</Radio>
  </RadioGroup>
);
```

**Light**

[RadioGroup orizzontale (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--horizontal\&viewMode=story\&globals=colorScheme:light)

**Dark**

[RadioGroup orizzontale (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--horizontal\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-radiogroup--horizontal)

Lo spazio predefinito rimane invariato in entrambe le direzioni.

## Anatomia

Inserisci ogni `Radio` o `Radio.Root` nel gruppo e associalo a un'etichetta. Usa `Radio.Indicator` per comporre un indicatore personalizzato. `RadioGroup` e `Radio` sono esportazioni separate.

```text theme={null}
fieldset
├── legend
└── RadioGroup
    ├── label
    │   └── Radio
    └── label
        └── Radio
```

| Parte | Requisito | Scopo |
| - | - | - |
| `RadioGroup` | Obbligatorio | Gestisce la selezione, la navigazione tramite tastiera e l'integrazione con i moduli. |
| `Radio` | Uno per opzione | Fornisce un'opzione con un `value` distinto. |
| `label` | Consigliato per ogni opzione | Fornisce un nome visibile e selezionabile per il relativo pulsante di opzione. |
| `fieldset`, `legend` | Raggruppamento facoltativo | Raggruppa controlli correlati sotto un'intestazione visibile. |

Assegna al gruppo un proprio nome accessibile usando `aria-label` o `aria-labelledby`. Negli esempi seguenti, `aria-labelledby` collega il gruppo alla legenda. Ogni pulsante di opzione necessita anche di un proprio nome. Inserisci le props di selezione in `RadioGroup` e i valori delle opzioni in `Radio`.

## Stato controllato

Passa `value` e aggiornalo con `onValueChange` per gestire la stessa frequenza di fatturazione nello stato di React. La selezione appartiene al gruppo, non ai singoli controlli radio.

```tsx theme={null}
import { useId, useState } from 'react';
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const BillingFrequency = () => {
  const labelId = useId();
  const [billingFrequency, setBillingFrequency] = useState('monthly');

  return (
    <fieldset>
      <legend id={labelId}>Billing frequency</legend>
      <RadioGroup
        name="billingFrequency"
        value={billingFrequency}
        onValueChange={setBillingFrequency}
        aria-labelledby={labelId}
      >
        <label>
          <Radio value="monthly" />
          Monthly
        </label>
        <label>
          <Radio value="yearly" />
          Yearly
        </label>
      </RadioGroup>
    </fieldset>
  );
};
```

`onValueChange` riceve il valore successivo e i dettagli dell'evento. Il tipo generico del valore viene dedotto dalle props. Usa `disabled` sul gruppo per disabilitare ogni opzione oppure su una singola opzione radio per disabilitare una scelta. I tasti freccia consentono di navigare e selezionare le opzioni abilitate; Tab sposta il focus fuori dal gruppo. La versione installata di Base UI supporta i tasti freccia sia orizzontali sia verticali. RadioGroup aggiunge la prop `orientation` solo visiva senza modificare tale contratto della tastiera.

## Integrazione nativa e dettagli degli eventi

Per impostazione predefinita, `RadioGroup` esegue il rendering di un div. Le prop native e `ref` hanno come destinazione quell'elemento; `render` compone un altro elemento e modifica la destinazione effettiva di ref. `inputRef` ha come destinazione l'input nascosto rappresentativo di un radio figlio, utilizzando l'opzione abilitata selezionata o un'alternativa abilitata. I tipi pubblici includono `RadioGroupProps`, `RadioGroupState`, `RadioGroupChangeEventReason` e `RadioGroupChangeEventDetails` generici.

Il callback riceve i dettagli dell'evento originale, inclusi `event`, `reason`, `cancel()` e `allowPropagation()` nativi. Annulla una modifica proposta prima di aggiornare lo stato controllato quando la scelta deve essere rifiutata.

Mantieni `name`, `form`, `required`, `disabled` e `readOnly` nel gruppo per il contratto di modulo Base UI esistente. Il valore selezionato viene inviato con `name`; i gruppi disabilitati vengono esclusi e i gruppi di sola lettura mantengono la selezione. `form` supporta un gruppo esterno al proprio modulo. La versione installata non ripristina automaticamente lo stato del gruppo al ripristino nativo del modulo. Reimposta lo stato controllato dal gestore `onReset` del modulo quando il tuo workflow lo richiede.

Nei componenti front-end sandbox, inserisci il gruppo nel relativo modulo proprietario. Il renderer inoltra la convalida `required` e blocca i riferimenti `form` espliciti, che altrimenti vengono risolti nell'intero documento host.

[SegmentedControl](https://docs.twenty.com/it/ui/components/input/segmented-control.md) è una preimpostazione pratica assemblata da queste primitive per una breve scelta esclusiva. Utilizza la semantica radio e richiede un nome di gruppo accessibile. Le schede e la navigazione dei pannelli delle schede sono controlli separati.

## Props

Il riferimento viene generato dai tipi pubblici del componente. Gli attributi nativi, inclusi i nomi accessibili e i gestori degli eventi, sono accettati anche nelle parti che eseguono il rendering degli elementi.

**className** `string | ((state: RadioGroupState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**defaultValue** `TValue`

The uncontrolled value of the radio button that should be initially selected.

To render a controlled radio group, use the `value` prop instead.

**disabled** `boolean` (default: false)

Whether the component should ignore user interaction.

**form** `string`

Identifies the form that owns the radio inputs.
Useful when the radio group is rendered outside the form.

**inputRef** `Ref\<HTMLInputElement\>`

A ref to access the hidden input element.

**name** `string`

Identifies the field when a form is submitted.

**onValueChange** `((value: TValue, eventDetails: \{ reason: "none"; event: Event; cancel: () =\> void; allowPropagation: () =\> void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; \}) =\> void)`

Callback fired when the value changes.

**orientation** `"horizontal" | "vertical"` (default: vertical)

Visual layout direction, reflected in data-orientation. Does not change arrow-key navigation or set aria-orientation.

**readOnly** `boolean` (default: false)

Whether the user should be unable to select a different radio button in the group.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, RadioGroupState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**required** `boolean` (default: false)

Whether the user must choose a value before submitting a form.

**style** `CSSProperties | ((state: RadioGroupState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

**value** `TValue`

The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the `defaultValue` prop instead.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.