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

> Redă o opțiune într-un grup de butoane radio care se exclud reciproc.

## Prezentare generală

`Radio` reprezintă o opțiune în cadrul [RadioGroup](https://docs.twenty.com/ro/ui/primitives/input/radio-group.md). Atribuie fiecărei opțiuni o `value` distinctă și o etichetă vizibilă. Grupul deține valoarea selectată.

**Light**

[Exemplu de buton radio (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de buton radio (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)

## Utilizare

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

Proprietatea `size` acceptă `sm` sau `md` și are ca valoare implicită `sm`. Utilizați aceeași dimensiune pentru opțiunile dintr-un grup.

## Opțiuni vizuale

Comparați stările selectată și dezactivată, dimensiunile și aspectele implicite și de card. Folosiți un grup etichetat de opțiuni pentru o alegere efectivă.

**Light**

[Opțiuni vizuale pentru butoanele radio (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opțiuni vizuale pentru butoanele radio (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)

## Părți complete

`Radio.Root` și `Radio.Indicator` expun părțile Base UI instalate fără asamblarea stilizată. Compuneți-le atunci când aveți nevoie de conținut personalizat sau de plasarea indicatorului. Elementul apelabil `Radio` oferă aspectul și indicatorul radio de la Twenty pentru opțiunile obișnuite.

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

Butoanele radio standard și `Radio.Root` redau un element span cu semantică de buton radio și un input nativ ascuns adiacent. Butoanele radio de tip card redau un div. `ref` vizează rădăcina redată; `inputRef` vizează intrarea. `Radio.Indicator` redă un span, iar referința sa vizează acel element. `render`, `className` și `style` bazate pe stare, atributele native și gestionarii de evenimente își păstrează contractele din amonte. Tipurile publice includ `RadioProps`, `RadioRootProps`, `RadioRootState`, `RadioIndicatorProps` și `RadioIndicatorState`.

## Opțiuni card

Folosește `variant="card"` pentru opțiuni pe întreaga lățime, cu un indicator radio inserat. Butoanele radio de tip card își păstrează implicit rădăcina div. Utilizați `render` pentru a alege explicit un alt element. Când acel element este un buton nativ, setați și `nativeButton`. Păstrează controalele interactive în afara conținutului cardului.

Oferiți grupului suficientă lățime pentru conținutul său și lăsați spațiu pentru indicator în partea din dreapta sus. Un titlu, o pictogramă și o scurtă descriere ajută la explicarea fiecărei opțiuni.

**Light**

[Opțiuni de card radio (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--cards-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opțiuni de card radio (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>
);
```

## Compunere nativă explicită

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

Referința vizează butonul compus. Pentru rădăcini personalizate care nu sunt butoane, lăsați `nativeButton` la false și transmiteți proprietățile de randare furnizate și referința către elementul efectiv.

## Tastatură și selecție

Tab intră în grup sau îl părăsește. Tastele săgeată se deplasează între opțiunile activate și selectează opțiunea focalizată. Spațiu selectează butonul radio focalizat. Butonul radio Base UI instalat suprimă selectarea cu Enter atât pentru rădăcinile implicite, cât și pentru butoanele native compuse. Gestionarele de selectare și de modificare aparțin de `RadioGroup`; consultați [exemplul său necontrolat](https://docs.twenty.com/ro/ui/primitives/input/radio-group.md#uncontrolled-state) și [exemplul controlat](https://docs.twenty.com/ro/ui/primitives/input/radio-group.md#controlled-state).

Săgețile pentru butoane radio modifică selecția pe măsură ce mută focalizarea. [Dropdown.SelectionGroup](https://docs.twenty.com/ro/ui/components/navigation/dropdown.md) mută focalizarea cu săgețile și confirmă o alegere cu Enter sau Space.

`Radio` și `Radio.Root` sunt generice în raport cu tipul valorii. Păstrați acest tip consecvent cu grupul său. Atributele native, precum `aria-describedby`, pot asocia o opțiune cu text de ajutor suplimentar.

## Proprietăți

Referința este generată din tipurile publice ale componentelor. Atributele native, inclusiv numele accesibile și gestionarele de evenimente, sunt acceptate și pentru părțile care redau elemente.

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