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

# Control segmentat

> Alegeți o valoare dintr-un grup compact de opțiuni cu etichete sau pictograme.

## Prezentare generală

`SegmentedControl` este o presetare alcătuită din [Radio](https://docs.twenty.com/ro/ui/primitives/input/radio.md) și [RadioGroup](https://docs.twenty.com/ro/ui/primitives/input/radio-group.md), cu opțiuni alăturate. Utilizați-l pentru o alegere scurtă, reciproc exclusivă. Pentru navigarea între panouri de conținut, utilizați [Tabs](https://docs.twenty.com/ro/ui/primitives/navigation/tabs.md).

**Light**

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

**Dark**

[Exemplu SegmentControl (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)

## Utilizare

Furnizați un nume de grup accesibil folosind `aria-label` sau `aria-labelledby`. Fiecare opțiune necesită o valoare de tip șir unică în `value`. Selecția aparține grupului; opțiunile nu au o stare de bifare independentă.

```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` inițializează selecția. Grupul gestionează modificările ulterioare. Adăugați `onValueChange` dacă trebuie să le observați fără a controla valoarea.

## Stare controlată

```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' },
      ]}
    />
  );
};
```

Păstrați `value` în starea aplicației și actualizați-o în `onValueChange`. Nu combinați `value` și `defaultValue` și nu schimbați modurile de gestionare după montare.

## Opțiuni de pictograme

```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',
      },
    ]}
  />
);
```

O opțiune doar cu pictogramă necesită un `aria-label`. `startIcon` este decorativ și ascuns tehnologiei asistive. Opțiunile cu text vizibil utilizează `label` și pot oferi, de asemenea, `startIcon`. Setați `disabled` pentru o opțiune ca să împiedicați selectarea acesteia sau pentru grup ca să dezactivați fiecare opțiune.

## Tastatură, formulare și direcție

Tab intră în grup; tastele săgeată se deplasează între opțiunile activate și actualizează selecția. Acest lucru urmează comportamentul butoanelor radio. Grupurile de selectare din listele derulante mută focalizarea cu tastele săgeată și selectează la activare. `itemWidth="equal"` este implicit; utilizați `content` când etichetele ar trebui să determine lățimile. Setați `name` pentru a include valoarea selectată în trimiterea formularului nativ. Presetarea păstrează starea `required`, `readOnly` și disabled a RadioGroup, precum și integrarea cu formularele native. `onValueChange` primește valoarea selectată și detaliile evenimentului Base UI, inclusiv `reason` și `cancel()`.

Pentru conținut de la dreapta la stânga, asociați [DirectionProvider](https://docs.twenty.com/ro/ui/primitives/layout/direction-provider.md) cu un atribut `dir` corespunzător. Furnizorul controlează interacțiunea direcțională; `dir` controlează aspectul documentului.

## Compoziție și proprietăți native

Proprietățile native, `className`, `style`, `render` și `ref` vizează `div`-ul grupului. Utilizați `render` pentru a compune acel grup cu un alt element; păstrați-i numele accesibil și semantica de grup de butoane radio. Opțiunile redau elemente `span` cu `role="radio"` și intrări radio native ascunse. Presetarea nu atribuie roluri de filă sau panou de filă. Pentru conținut radio personalizat, proprietăți native pentru fiecare opțiune sau o țintă de redare radio diferită, compuneți direct `Radio.Root` și `RadioGroup`.

## Proprietăți

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