> ## 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` خيارًا واحدًا ضمن [RadioGroup](https://docs.twenty.com/ar/ui/primitives/input/radio-group.md). امنح كل خيار `value` مميزًا وتسمية مرئية. تمتلك المجموعة القيمة المحددة.

**Light**

[مثال على زر الاختيار (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على زر الاختيار (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)

## استخدام

```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>
);
```

تقبل الخاصية `size` القيمة `sm` أو `md`، وتكون `sm` افتراضيًا. استخدم الحجم نفسه للخيارات في مجموعة.

## الخيارات المرئية

قارن بين حالات المحدد والمعطل، والأحجام، والمظهرين الافتراضي والبطاقة. استخدم مجموعة خيارات معنونة لاتخاذ اختيار فعلي.

**Light**

[الخيارات المرئية لزر الاختيار (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[الخيارات المرئية لزر الاختيار (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)

## الأجزاء الكاملة

يكشف `Radio.Root` و`Radio.Indicator` عن أجزاء Base UI المثبتة دون التجميع المنسق. قم بتجميعها عندما تحتاج إلى محتوى مخصص أو موضع مخصص للمؤشر. يوفر `Radio` القابل للاستدعاء مظهر زر الاختيار والمؤشر الخاصين بـ Twenty للخيارات الشائعة.

```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>
);
```

تعرض أزرار الاختيار القياسية و`Radio.Root` عنصر span بدلالات زر اختيار وإدخالاً أصلياً مخفياً مجاوراً. تُعرِض أزرار الاختيار على هيئة بطاقة عنصر div. يستهدف `ref` الجذر المُعرَض؛ ويستهدف `inputRef` الإدخال. يُعرِض `Radio.Indicator` عنصر span، ويستهدف مرجعه ذلك العنصر. تحتفظ `render` و`className` و`style` المستندتان إلى الحالة والسمات الأصلية ومعالجات الأحداث بعقود المصدر الخاصة بها. تتضمن الأنواع العامة `RadioProps` و`RadioRootProps` و`RadioRootState` و`RadioIndicatorProps` و`RadioIndicatorState`.

## خيارات البطاقة

استخدم `variant="card"` للخيارات بعرض كامل مع مؤشر زر اختيار داخلي. تحتفظ أزرار الاختيار على هيئة بطاقة بجذر div افتراضياً. استخدم `render` لاختيار عنصر آخر صراحةً. عندما يكون ذلك العنصر زراً أصلياً، اضبط أيضاً `nativeButton`. أبقِ عناصر التحكم التفاعلية خارج محتوى البطاقة.

امنح المجموعة عرضًا كافيًا لمحتواها واترك مساحة للمؤشر في أعلى اليمين. يساعد العنوان والأيقونة والوصف القصير على شرح كل خيار.

**Light**

[خيارات بطاقات الاختيار (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--cards-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[خيارات بطاقات الاختيار (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>
);
```

## تركيب أصلي صريح

```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>
);
```

يستهدف المرجع الزر المُركَّب. بالنسبة إلى الجذور المخصصة التي ليست أزراراً، اترك `nativeButton` بالقيمة false ومرّر خصائص العرض والمرجع المقدمين إلى العنصر الفعلي.

## لوحة المفاتيح والتحديد

يدخل مفتاح Tab إلى المجموعة أو يخرج منها. تتنقل مفاتيح الأسهم بين الخيارات الممكّنة وتحدد الخيار الذي عليه التركيز. يحدد مفتاح المسافة زر الاختيار الذي عليه التركيز. يلغي زر الاختيار Base UI المثبّت التحديد بمفتاح Enter لكلٍ من الجذور الافتراضية والأزرار الأصلية المُركَّبة. توجد معالجات التحديد والتغيير على `RadioGroup`؛ راجع [مثاله غير المتحكَّم به](https://docs.twenty.com/ar/ui/primitives/input/radio-group.md#uncontrolled-state) و[مثاله المتحكَّم به](https://docs.twenty.com/ar/ui/primitives/input/radio-group.md#controlled-state).

تغيّر أسهم زر الاختيار التحديد أثناء نقلها للتركيز. ينقل [Dropdown.SelectionGroup](https://docs.twenty.com/ar/ui/components/navigation/dropdown.md) التركيز باستخدام مفاتيح الأسهم ويؤكد اختيارًا باستخدام Enter أو Space.

`Radio` و`Radio.Root` عامان بالنسبة إلى نوع القيمة. حافظ على اتساق هذا النوع مع مجموعته. يمكن للسمات الأصلية مثل `aria-describedby` ربط خيار بنص مساعدة إضافي.

## الإزاحة

يتم إنشاء المرجع من أنواع المكونات العامة. تُقبل أيضًا السمات الأصلية، بما في ذلك الأسماء القابلة للوصول ومعالجات الأحداث، في الأجزاء التي تعرض عناصر.

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