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

> Visualizza un'opzione in un gruppo radio a selezione esclusiva.

## Panoramica

`Radio` rappresenta un'opzione all'interno di [RadioGroup](https://docs.twenty.com/it/ui/primitives/input/radio-group.md). Assegna a ogni opzione un `value` distinto e un'etichetta visibile. Il gruppo possiede il valore selezionato.

**Light**

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

**Dark**

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

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

## Utilizzo

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

export const ContactMethod = () => (
  <RadioGroup
    name="contactMethod"
    defaultValue="email"
    aria-label="Preferred contact method"
  >
    <Radio value="email">Email</Radio>
    <Radio value="phone">Phone</Radio>
    <Radio value="post" disabled>
      Postal mail (unavailable)
    </Radio>
  </RadioGroup>
);
```

La prop `size` accetta `sm` o `md` e il valore predefinito è `sm`. Utilizza la stessa dimensione per le opzioni di un gruppo.

## Scelte visive

Confronta gli stati selezionato e disabilitato, le dimensioni e gli aspetti predefinito e a scheda. Utilizza un gruppo di opzioni etichettato per una scelta effettiva.

**Light**

[Scelte visive per i pulsanti di opzione (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Scelte visive per i pulsanti di opzione (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--catalog\&viewMode=story\&globals=colorScheme:dark)

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

## Parti complete

`Radio.Root` e `Radio.Indicator` espongono le parti Base UI installate senza l'assemblaggio con stili. Componili quando hai bisogno di contenuti personalizzati o di un posizionamento personalizzato dell'indicatore. Il componente richiamabile `Radio` fornisce l'aspetto e l'indicatore radio di Twenty per le opzioni comuni.

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

export const StorageChoice = () => (
  <RadioGroup aria-label="Storage" defaultValue="ssd">
    <Radio.Root value="ssd">
      <Radio.Indicator keepMounted render={<span />}>
        ✓
      </Radio.Indicator>
      SSD
    </Radio.Root>
    <Radio.Root value="hdd">HDD</Radio.Root>
  </RadioGroup>
);
```

I radio standard e `Radio.Root` eseguono il rendering di uno span con semantica radio e di un input nativo nascosto adiacente. I radio a scheda eseguono il rendering di un div. `ref` punta alla radice sottoposta a rendering; `inputRef` punta all'input. `Radio.Indicator` esegue il rendering di uno span e il relativo ref punta a quell'elemento. `render`, `className` e `style` basati sullo stato, gli attributi nativi e i gestori di eventi mantengono i rispettivi contratti upstream. I tipi pubblici includono `RadioProps`, `RadioRootProps`, `RadioRootState`, `RadioIndicatorProps` e `RadioIndicatorState`.

## Opzioni della scheda

Usa `variant="card"` per opzioni a larghezza intera con un indicatore radio inserito. Per impostazione predefinita, i radio a scheda mantengono la propria radice div. Usa `render` per scegliere esplicitamente un altro elemento. Quando tale elemento è un pulsante nativo, imposta anche `nativeButton`. Mantieni i controlli interattivi al di fuori del contenuto della scheda.

Assegna al gruppo una larghezza sufficiente per il relativo contenuto e lascia spazio per l'indicatore in alto a destra. Un titolo, un'icona e una breve descrizione aiutano a spiegare ciascuna scelta.

**Light**

[Opzioni radio scheda (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--cards-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opzioni radio scheda (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--cards-documentation\&viewMode=story\&globals=colorScheme:dark)

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

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

const VIEWS = [
  {
    value: 'table',
    title: 'Table view',
    description: 'Browse records in rows.',
    Icon: IconTable,
  },
  {
    value: 'board',
    title: 'Board view',
    description: 'Track progress across columns.',
    Icon: IconLayoutKanban,
  },
];

export const ViewChoice = () => (
  <RadioGroup
    aria-label="Default view"
    defaultValue="table"
    style={{ width: 280 }}
  >
    {VIEWS.map(({ value, title, description, Icon }) => (
      <Radio key={value} variant="card" value={value}>
        <span style={{ display: 'grid', gap: 8, paddingInlineEnd: 24 }}>
          <Icon size={20} aria-hidden />
          <Text
            render={<span />}
            style={{ fontWeight: 'var(--t-font-weight-medium)' }}
          >
            {title}
          </Text>
          <Text
            render={<span />}
            style={{ color: 'var(--t-font-color-secondary)', lineHeight: 1.5 }}
          >
            {description}
          </Text>
        </span>
      </Radio>
    ))}
  </RadioGroup>
);
```

## Composizione nativa esplicita

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

export const BillingChoice = () => (
  <RadioGroup aria-label="Billing interval" defaultValue="monthly">
    <Radio
      variant="card"
      value="monthly"
      nativeButton
      render={<button type="button" />}
    >
      Monthly
    </Radio>
    <Radio
      variant="card"
      value="yearly"
      nativeButton
      render={<button type="button" />}
    >
      Yearly
    </Radio>
  </RadioGroup>
);
```

Il ref punta al pulsante composto. Per le radici personalizzate che non sono pulsanti, lascia `nativeButton` su false e inoltra le props di render fornite e il ref all'elemento effettivo.

## Tastiera e selezione

Tab consente di entrare o uscire dal gruppo. I tasti freccia consentono di spostarsi tra le opzioni abilitate e di selezionare l'opzione attiva. Spazio seleziona il radio attivo. Il radio Base UI installato sopprime la selezione con Invio sia per le radici predefinite sia per i pulsanti nativi composti. I gestori di selezione e modifica appartengono a `RadioGroup`; consulta il relativo [esempio non controllato](https://docs.twenty.com/it/ui/primitives/input/radio-group.md#uncontrolled-state) e [esempio controllato](https://docs.twenty.com/it/ui/primitives/input/radio-group.md#controlled-state).

Le frecce del radio modificano la selezione mentre spostano lo stato attivo. [Dropdown.SelectionGroup](https://docs.twenty.com/it/ui/components/navigation/dropdown.md) sposta lo stato attivo con le frecce e conferma una scelta con Invio o Spazio.

`Radio` e `Radio.Root` sono generici rispetto al tipo di valore. Mantieni tale tipo coerente con il relativo gruppo. Gli attributi nativi come `aria-describedby` possono associare un'opzione a testo di assistenza aggiuntivo.

## Props

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

**children** `ReactNode`

Option content. Card options wrap it in a padded full-width content area.

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

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

**disabled** `boolean`

Whether the component should ignore user interaction.

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

A ref to access the hidden input element.

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

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button.

**readOnly** `boolean`

Whether the user should be unable to select the radio button.

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

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`

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

**size** `"md" | "sm"` (default: sm)

Visual size of the radio.

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

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

**value** `TValue` *required*

The unique identifying value of the radio in a group.

**variant** `"card" | "default"` (default: default)

Appearance of the styled assembly: a standard radio or a full-width card. Standard radios use a span and card radios use a div unless render replaces the root.

### Radio.Root

**Root.className** `string | ((state: RadioRootState) =\> string | undefined)`

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

**Root.disabled** `boolean`

Whether the component should ignore user interaction.

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

A ref to access the hidden input element.

**Root.nativeButton** `boolean` (default: false)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button.

**Root.readOnly** `boolean`

Whether the user should be unable to select the radio button.

**Root.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, RadioRootState\>`

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.

**Root.required** `boolean`

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

**Root.style** `CSSProperties | ((state: RadioRootState) =\> CSSProperties | undefined)`

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

**Root.value** `Value` *required*

The unique identifying value of the radio in a group.

### Radio.Indicator

**Indicator.className** `string | ((state: RadioIndicatorState) =\> string | undefined)`

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

**Indicator.keepMounted** `boolean` (default: false)

Whether to keep the HTML element in the DOM when the radio button is inactive.

**Indicator.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, RadioIndicatorState\>`

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.

**Indicator.style** `CSSProperties | ((state: RadioIndicatorState) =\> CSSProperties | undefined)`

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


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