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

> Representa una opción en un grupo de botones de opción mutuamente excluyentes.

## Resumen

`Radio` representa una opción dentro de [RadioGroup](https://docs.twenty.com/es/ui/primitives/input/radio-group.md). Asigna a cada opción un `value` distinto y una etiqueta visible. El grupo posee el valor seleccionado.

**Light**

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

**Dark**

[Ejemplo de 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)

## "Uso"

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

La prop `size` acepta `sm` o `md` y su valor predeterminado es `sm`. Usa el mismo tamaño para las opciones de un grupo.

## Opciones visuales

Compara los estados seleccionado y deshabilitado, los tamaños y las apariencias predeterminada y de tarjeta. Usa un grupo de opciones con etiqueta para una elección real.

**Light**

[Opciones visuales para botón de opción (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radio--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opciones visuales para botón de opción (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)

## Partes completas

`Radio.Root` y `Radio.Indicator` exponen las partes instaladas de Base UI sin el ensamblaje con estilos. Combínalos cuando necesites contenido personalizado o una ubicación personalizada del indicador. El `Radio` invocable proporciona la apariencia de radio y el indicador de Twenty para opciones comunes.

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

Los botones de opción estándar y `Radio.Root` representan un span con semántica de radio y una entrada nativa oculta adyacente. Los radios de tarjeta renderizan un div. `ref` apunta a la raíz renderizada; `inputRef` apunta a la entrada. `Radio.Indicator` renderiza un span y su ref apunta a ese elemento. `render`, `className` y `style` basados en el estado, los atributos nativos y los controladores de eventos conservan sus contratos originales. Los tipos públicos incluyen `RadioProps`, `RadioRootProps`, `RadioRootState`, `RadioIndicatorProps` y `RadioIndicatorState`.

## Opciones de tarjeta

Use `variant="card"` para opciones de ancho completo con un indicador de radio insertado. Los radios de tarjeta conservan su raíz div de forma predeterminada. Usa `render` para elegir explícitamente otro elemento. Cuando ese elemento es un botón nativo, configura también `nativeButton`. Mantenga los controles interactivos fuera del contenido de la tarjeta.

Proporciona al grupo suficiente ancho para su contenido y deja espacio para el indicador en la parte superior derecha. Un título, un icono y una descripción breve ayudan a explicar cada opción.

**Light**

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

**Dark**

[Opciones de tarjeta de 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>
);
```

## Composición nativa explícita

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

El ref apunta al botón compuesto. Para raíces personalizadas que no sean botones, deja `nativeButton` en false y reenvía las props de render proporcionadas y el ref al elemento real.

## Teclado y selección

Tab entra o sale del grupo. Las teclas de flecha se desplazan entre las opciones habilitadas y seleccionan la opción enfocada. Espacio selecciona el botón de opción enfocado. El radio de Base UI instalado impide la selección con Enter tanto para las raíces predeterminadas como para los botones nativos compuestos. Los controladores de selección y cambio pertenecen a `RadioGroup`; consulta su [ejemplo no controlado](https://docs.twenty.com/es/ui/primitives/input/radio-group.md#uncontrolled-state) y su [ejemplo controlado](https://docs.twenty.com/es/ui/primitives/input/radio-group.md#controlled-state).

Las flechas de radio cambian la selección a medida que desplazan el foco. [Dropdown.SelectionGroup](https://docs.twenty.com/es/ui/components/navigation/dropdown.md) mueve el foco con las flechas y confirma una opción con Intro o Espacio.

`Radio` y `Radio.Root` son genéricos respecto al tipo de valor. Mantén ese tipo coherente con su grupo. Los atributos nativos como `aria-describedby` pueden asociar una opción con texto de ayuda adicional.

## "Props"

La referencia se genera a partir de los tipos de componentes públicos. Los atributos nativos, incluidos los nombres accesibles y los controladores de eventos, también se aceptan en las partes que representan elementos.

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