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

# RadioGroup

> Gestiona una única selección entre un conjunto de opciones de radio.

## Resumen

`RadioGroup` coordina el valor, la navegación con el teclado y el envío de formularios de sus elementos secundarios [Radio](https://docs.twenty.com/es/ui/primitives/input/radio.md).

**Light**

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

**Dark**

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

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-radiogroup--display)

## "Uso"

### Estado no controlado

Usa `defaultValue` para establecer la frecuencia de facturación inicial. El grupo controla los cambios posteriores.

```tsx theme={null}
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const BillingFrequency = () => (
  <RadioGroup
    name="billingFrequency"
    defaultValue="monthly"
    aria-label="Billing frequency"
  >
    <Radio value="monthly">Monthly</Radio>
    <Radio value="yearly">Yearly</Radio>
  </RadioGroup>
);
```

El `name` del grupo identifica el valor seleccionado al enviar el formulario. Proporciona al grupo un nombre accesible, además de etiquetar cada radio.

### Diseño horizontal

Los grupos usan una columna vertical de forma predeterminada. Establece `orientation="horizontal"` para una fila. La prop controla el diseño visual mediante `data-orientation`; no establece `aria-orientation` ni cambia la navegación con teclado. Las teclas de flecha horizontales y verticales conservan el comportamiento existente de Base UI, incluida la navegación de derecha a izquierda mediante [DirectionProvider](https://docs.twenty.com/es/ui/primitives/layout/direction-provider.md).

```tsx theme={null}
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const HorizontalBillingFrequency = () => (
  <RadioGroup
    orientation="horizontal"
    name="billingFrequency"
    defaultValue="monthly"
    aria-label="Billing frequency"
  >
    <Radio value="monthly">Monthly</Radio>
    <Radio value="yearly">Yearly</Radio>
  </RadioGroup>
);
```

**Light**

[RadioGroup horizontal (light)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--horizontal\&viewMode=story\&globals=colorScheme:light)

**Dark**

[RadioGroup horizontal (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-radiogroup--horizontal\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-radiogroup--horizontal)

El espacio predeterminado se mantiene igual en cualquier dirección.

## Anatomía

Coloca cada `Radio` o `Radio.Root` dentro del grupo y asócialo con una etiqueta. Usa `Radio.Indicator` para crear un indicador personalizado. `RadioGroup` y `Radio` son exportaciones independientes.

```text theme={null}
fieldset
├── legend
└── RadioGroup
    ├── label
    │   └── Radio
    └── label
        └── Radio
```

| Parte | Requisito | Propósito |
| - | - | - |
| `RadioGroup` | Obligatorio | Gestiona la selección, la navegación con el teclado y la integración con formularios. |
| `Radio` | Uno por opción | Proporciona una opción con un `value` distinto. |
| `label` | Recomendado para cada opción | Proporciona un nombre visible en el que se puede hacer clic para su botón de opción. |
| `fieldset`, `legend` | Agrupación opcional | Agrupa controles relacionados bajo un encabezado visible. |

Proporcione al grupo su propio nombre accesible mediante `aria-label` o `aria-labelledby`. En los ejemplos siguientes, `aria-labelledby` conecta el grupo con la leyenda. Cada botón de opción también necesita su propio nombre. Coloque las propiedades de selección en `RadioGroup` y los valores de opción en `Radio`.

## Estado controlado

Pasa `value` y actualízalo con `onValueChange` para controlar la misma frecuencia de facturación en el estado de React. La selección pertenece al grupo, no a los controles de radio individuales.

```tsx theme={null}
import { useId, useState } from 'react';
import { Radio, RadioGroup } from 'twenty-ui/primitives/input';

export const BillingFrequency = () => {
  const labelId = useId();
  const [billingFrequency, setBillingFrequency] = useState('monthly');

  return (
    <fieldset>
      <legend id={labelId}>Billing frequency</legend>
      <RadioGroup
        name="billingFrequency"
        value={billingFrequency}
        onValueChange={setBillingFrequency}
        aria-labelledby={labelId}
      >
        <label>
          <Radio value="monthly" />
          Monthly
        </label>
        <label>
          <Radio value="yearly" />
          Yearly
        </label>
      </RadioGroup>
    </fieldset>
  );
};
```

`onValueChange` recibe el siguiente valor y los detalles del evento. El tipo de valor genérico se infiere de las props. Usa `disabled` en el grupo para deshabilitar todas las opciones, o en un radio individual para deshabilitar una opción. Las teclas de flecha permiten navegar y seleccionar opciones habilitadas; Tab sale del grupo. La versión instalada de Base UI admite teclas de flecha tanto horizontales como verticales. RadioGroup añade la prop `orientation` solo visual sin cambiar ese contrato de teclado.

## Integración nativa y detalles de eventos

`RadioGroup` representa un div de forma predeterminada. Las props nativas y `ref` se dirigen a ese elemento; `render` compone otro elemento y cambia el destino real de ref. `inputRef` se dirige a la entrada oculta representativa de un radio secundario, usando la opción habilitada seleccionada o una alternativa habilitada. Los tipos públicos incluyen los genéricos `RadioGroupProps`, `RadioGroupState`, `RadioGroupChangeEventReason` y `RadioGroupChangeEventDetails`.

La callback recibe los detalles del evento original, incluidos el `event` nativo, `reason`, `cancel()` y `allowPropagation()`. Cancela un cambio propuesto antes de actualizar el estado controlado cuando se deba rechazar la elección.

Mantén `name`, `form`, `required`, `disabled` y `readOnly` en el grupo para el contrato de formularios existente de Base UI. El valor seleccionado se envía con `name`; los grupos deshabilitados se excluyen y los grupos de solo lectura conservan su selección. `form` admite un grupo fuera de su formulario propietario. La versión instalada no restaura automáticamente el estado del grupo al restablecer un formulario nativo. Restablece el estado controlado desde el controlador `onReset` del formulario cuando tu flujo de trabajo lo requiera.

En componentes front aislados, coloca el grupo dentro de su formulario propietario. El renderizador reenvía la validación de `required` y bloquea las referencias explícitas a `form`, que de otro modo se resolverían en todo el documento host.

[SegmentedControl](https://docs.twenty.com/es/ui/components/input/segmented-control.md) es un ajuste preestablecido práctico ensamblado a partir de estas primitivas para una elección exclusiva breve. Usa semántica de radio y requiere un nombre de grupo accesible. Las pestañas y la navegación entre paneles de pestañas son controles independientes.

## "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 renderizan elementos.

**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** `TValue`

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.

**inputRef** `Ref\<HTMLInputElement\>`

A ref to access the hidden input element.

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

**orientation** `"horizontal" | "vertical"` (default: vertical)

Visual layout direction, reflected in data-orientation. Does not change arrow-key navigation or set aria-orientation.

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

**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** `TValue`

The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the `defaultValue` prop instead.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.