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

# Controllo segmentato

> Scegli un valore da un gruppo compatto di opzioni etichettate o con icone.

## Panoramica

`SegmentedControl` è un preset composto da [Radio](https://docs.twenty.com/it/ui/primitives/input/radio.md) e [RadioGroup](https://docs.twenty.com/it/ui/primitives/input/radio-group.md), con opzioni unite. Usalo per una scelta breve e mutuamente esclusiva. Per la navigazione tra pannelli di contenuto, usa [Tabs](https://docs.twenty.com/it/ui/primitives/navigation/tabs.md).

**Light**

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

**Dark**

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

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

## Utilizzo

Fornisci un nome di gruppo accessibile con `aria-label` o `aria-labelledby`. Ogni opzione necessita di una stringa `value` univoca. La selezione appartiene al gruppo; le opzioni non hanno uno stato selezionato indipendente.

```tsx theme={null}
import { SegmentedControl } from 'twenty-ui/components/input';

export const BillingPeriod = () => (
  <SegmentedControl
    aria-label="Billing period"
    name="billingPeriod"
    defaultValue="annual"
    options={[
      { label: 'Annual', value: 'annual' },
      { label: 'Monthly', value: 'monthly' },
    ]}
  />
);
```

`defaultValue` inizializza la selezione. Il gruppo gestisce le modifiche successive. Aggiungi `onValueChange` se devi osservarle senza controllare il valore.

## Stato controllato

```tsx theme={null}
import { useState } from 'react';
import { SegmentedControl } from 'twenty-ui/components/input';

export const BillingPeriod = () => {
  const [period, setPeriod] = useState('annual');

  return (
    <SegmentedControl
      aria-label="Billing period"
      name="billingPeriod"
      value={period}
      onValueChange={setPeriod}
      options={[
        { label: 'Annual', value: 'annual' },
        { label: 'Monthly', value: 'monthly' },
      ]}
    />
  );
};
```

Mantieni `value` nello stato dell'applicazione e aggiornalo in `onValueChange`. Non combinare `value` e `defaultValue` e non cambiare modalità di gestione dopo il montaggio.

## Opzioni delle icone

```tsx theme={null}
import { SegmentedControl } from 'twenty-ui/components/input';
import { IconList, IconLayoutKanban } from 'twenty-ui/icon';

export const RecordLayout = () => (
  <SegmentedControl
    aria-label="Record layout"
    defaultValue="list"
    itemWidth="content"
    options={[
      { value: 'list', startIcon: <IconList />, 'aria-label': 'List' },
      {
        value: 'kanban',
        startIcon: <IconLayoutKanban />,
        'aria-label': 'Kanban',
      },
    ]}
  />
);
```

Un'opzione con sola icona richiede un `aria-label`. `startIcon` è decorativo ed è nascosto alla tecnologia assistiva. Le opzioni con testo visibile usano `label` e possono anche fornire `startIcon`. Imposta `disabled` su un'opzione per impedirne la selezione oppure sul gruppo per disabilitare tutte le opzioni.

## Tastiera, moduli e direzione

Tab entra nel gruppo; i tasti freccia si spostano tra le opzioni abilitate e aggiornano la selezione. Questo segue il comportamento dei pulsanti radio. I gruppi di selezione a discesa spostano lo stato attivo con i tasti freccia e selezionano all'attivazione. `itemWidth="equal"` è il valore predefinito; usa `content` quando le etichette devono determinare le larghezze. Imposta `name` per includere il valore selezionato nell'invio del modulo nativo. La preimpostazione mantiene `required`, `readOnly`, lo stato disabled e l'integrazione con i moduli nativi di RadioGroup. `onValueChange` riceve il valore selezionato e i dettagli dell'evento Base UI, inclusi `reason` e `cancel()`.

Per i contenuti da destra a sinistra, abbina [DirectionProvider](https://docs.twenty.com/it/ui/primitives/layout/direction-provider.md) a un attributo `dir` corrispondente. Il provider controlla l'interazione direzionale; `dir` controlla il layout del documento.

## Composizione e prop native

Le prop native, `className`, `style`, `render` e `ref` hanno come destinazione il `div` del gruppo. Usa `render` per comporre quel gruppo con un altro elemento; preservane il nome accessibile e la semantica del gruppo radio. Le opzioni eseguono il rendering di elementi `span` con `role="radio"` e input radio nativi nascosti. La preimpostazione non assegna ruoli di scheda o pannello di scheda. Per contenuti radio personalizzati, prop native per opzione o una destinazione di rendering radio diversa, componi direttamente `Radio.Root` e `RadioGroup`.

## Props

**aria-label** `string` *required*

Accessible group name. Supply this or `aria-labelledby`.

**aria-labelledby** `string` *required*

ID of an element that labels the group. Supply this or `aria-label`.

**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** `string`

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.

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

Stretch the control to the width of its container.

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

A ref to access the hidden input element.

**itemWidth** `"content" | "equal"` (default: equal)

Use equal-width options or size each option to its content.

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

**options** `readonly SegmentedControlOption\<TValue\>[]` *required*

Options with a unique string `value`, a `label` or `startIcon`, and optional `disabled`. Icon-only options require an `aria-label`.

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

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

Control height: `sm` (24px) or `md` (32px).

**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** `string`

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

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

**variant** `"rectangle" | "round"` (default: round)

Shape: `round` is a pill, `rectangle` fills its container with form-field corners.


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