> ## 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/ar/ui/primitives/input/radio.md) و[RadioGroup](https://docs.twenty.com/ar/ui/primitives/input/radio-group.md)، مع خيارات متصلة. استخدمه لاختيار قصير ومتبادل الاستبعاد. للتنقل بين لوحات المحتوى، استخدم [Tabs](https://docs.twenty.com/ar/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` وحالة التعطيل والتكامل مع النموذج الأصلي في RadioGroup. يتلقى `onValueChange` القيمة المحددة وتفاصيل حدث Base UI، بما في ذلك `reason` و`cancel()`.

للمحتوى من اليمين إلى اليسار، اجمع [DirectionProvider](https://docs.twenty.com/ar/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.