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

# Сегментированный элемент управления

> Выберите одно значение из компактной группы вариантов с метками или значками.

## Обзор

`SegmentedControl` — это предустановка, составленная из [Radio](https://docs.twenty.com/ru/ui/primitives/input/radio.md) и [RadioGroup](https://docs.twenty.com/ru/ui/primitives/input/radio-group.md), с объединёнными вариантами. Используйте его для краткого взаимоисключающего выбора. Для навигации между панелями содержимого используйте [Tabs](https://docs.twenty.com/ru/ui/primitives/navigation/tabs.md).

**Light**

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

**Dark**

[Пример 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)

## Использование

Задайте доступное имя группы с помощью `aria-label` или `aria-labelledby`. Для каждого варианта требуется уникальная строка `value`. Выбор относится к группе; варианты не имеют независимого состояния выбора.

```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` инициализирует выбор. Группа управляет последующими изменениями. Добавьте `onValueChange`, если вам нужно отслеживать их, не управляя значением.

## Управляемое состояние

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

Храните `value` в состоянии приложения и обновляйте его в `onValueChange`. Не сочетайте `value` и `defaultValue` и не переключайте режимы управления после монтирования.

## Параметры значков

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

Для параметра только со значком требуется `aria-label`. `startIcon` является декоративным и скрыт от вспомогательных технологий. Параметры с видимым текстом используют `label` и также могут предоставлять `startIcon`. Установите `disabled` для параметра, чтобы запретить его выбор, или для группы, чтобы отключить все параметры.

## Клавиатура, формы и направление

Клавиша Tab переводит фокус в группу; клавиши со стрелками перемещают между включенными параметрами и обновляют выбор. Это соответствует поведению переключателей. Группы выбора в раскрывающемся списке перемещают фокус клавишами со стрелками и выбирают при активации. `itemWidth="equal"` используется по умолчанию; используйте `content`, когда ширину должны определять метки. Установите `name`, чтобы включить выбранное значение в отправку нативной формы. Предустановка сохраняет `required`, `readOnly`, состояние disabled и интеграцию с нативными формами RadioGroup. `onValueChange` получает выбранное значение и сведения о событии Base UI, включая `reason` и `cancel()`.

Для содержимого справа налево используйте [DirectionProvider](https://docs.twenty.com/ru/ui/primitives/layout/direction-provider.md) вместе с соответствующим атрибутом `dir`. Провайдер управляет взаимодействием с учетом направления; `dir` управляет макетом документа.

## Композиция и нативные свойства

Нативные свойства, `className`, `style`, `render` и `ref` применяются к `div` группы. Используйте `render`, чтобы скомпоновать эту группу с другим элементом; сохраните ее доступное имя и семантику группы переключателей. Параметры отображают элементы `span` с `role="radio"` и скрытыми нативными входными элементами переключателей. Предустановка не назначает роли вкладки или панели вкладок. Для пользовательского содержимого переключателя, нативных свойств для каждого параметра или другого целевого элемента рендеринга переключателя используйте напрямую `Radio.Root` и `RadioGroup`.

## Свойства

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