RadioGroup

Resumen

RadioGroup coordina el valor, la navegación con el teclado y el envío de formularios de sus elementos secundarios Radio.

”Uso”

Estado no controlado

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

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.

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

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.

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.

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

string | ((state: RadioGroupState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

TValue

The uncontrolled value of the radio button that should be initially selected.To render a controlled radio group, use the value prop instead.

boolean

predeterminado:"false"

Whether the component should ignore user interaction.

string

Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.

Ref<HTMLInputElement>

A ref to access the hidden input element.

string

Identifies the field when a form is submitted.

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

"horizontal" | "vertical"

predeterminado:"vertical"

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

boolean

predeterminado:"false"

Whether the user should be unable to select a different radio button in the group.

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.

boolean

predeterminado:"false"

Whether the user must choose a value before submitting a form.

CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

TValue

The controlled value of the radio item that should be currently selected.To render an uncontrolled radio group, use the defaultValue prop instead.

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Resumen

”Uso”

Estado no controlado

Diseño horizontal

Anatomía

Estado controlado

Integración nativa y detalles de eventos

”Props”

​Resumen

​”Uso”

​Estado no controlado

​Diseño horizontal

​Anatomía

​Estado controlado

​Integración nativa y detalles de eventos

​”Props”

Resumen

”Uso”

Estado no controlado

Diseño horizontal

Anatomía

Estado controlado

Integración nativa y detalles de eventos

”Props”