> ## 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/ru/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 с семантикой переключателя и расположенный рядом скрытый нативный input. Радиокнопки-карточки рендерят div. `ref` указывает на отрендеренный корневой элемент; `inputRef` указывает на поле ввода. `Radio.Indicator` рендерит span, и его ref указывает на этот элемент. `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>
);
```

Ссылка ref указывает на составную кнопку. Для пользовательских корневых элементов, не являющихся кнопками, оставьте `nativeButton` со значением false и перенаправьте предоставленные свойства рендеринга и ref на фактический элемент.

## Клавиатура и выбор

Tab позволяет войти в группу или выйти из неё. Клавиши со стрелками перемещаются между доступными параметрами и выбирают параметр в фокусе. Пробел выбирает переключатель в фокусе. Установленная радиокнопка Base UI подавляет выбор по Enter как для корневых элементов по умолчанию, так и для скомпонованных нативных кнопок. Обработчики выбора и изменения должны находиться в `RadioGroup`; см. его [неконтролируемый пример](https://docs.twenty.com/ru/ui/primitives/input/radio-group.md#uncontrolled-state) и [контролируемый пример](https://docs.twenty.com/ru/ui/primitives/input/radio-group.md#controlled-state).

Стрелки радиокнопки изменяют выбор при перемещении фокуса. [Dropdown.SelectionGroup](https://docs.twenty.com/ru/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.