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

> Manage a single selection across a set of radio options.

`RadioGroup` coordinates the value, keyboard navigation, and form submission of its [Radio](/ui/components/input/radio) children.

## Default selection

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

export const BillingFrequency = () => {
  const labelId = useId();

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

Use `defaultValue` for an uncontrolled group. Its `name` identifies the selected value in form submission. Give the group an accessible name as well as labeling each radio.

## Controlled state

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

export const DisplayDensity = () => {
  const [density, setDensity] = useState('comfortable');

  return (
    <RadioGroup
      value={density}
      onValueChange={setDensity}
      aria-label="Display density"
    >
      <label>
        <Radio value="compact" />
        Compact
      </label>
      <label>
        <Radio value="comfortable" />
        Comfortable
      </label>
    </RadioGroup>
  );
};
```

`onValueChange` receives the next value and event details. The generic value type is inferred from the props. Use `disabled` on the group to disable every option, or on an individual radio to disable one choice. Arrow keys navigate the enabled options; Tab moves out of the group.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

<ParamField body="className" type="string | ((state: RadioGroupState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="defaultValue" type="TValue">
  The uncontrolled value of the radio button that should be initially selected.

  To render a controlled radio group, use the `value` prop instead.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="form" type="string">
  Identifies the form that owns the radio inputs.
  Useful when the radio group is rendered outside the form.
</ParamField>

<ParamField body="inputRef" type="Ref<HTMLInputElement>">
  A ref to access the hidden input element.
</ParamField>

<ParamField body="name" type="string">
  Identifies the field when a form is submitted.
</ParamField>

<ParamField body="onValueChange" type="((value: TValue, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Callback fired when the value changes.
</ParamField>

<ParamField body="readOnly" type="boolean" default="false">
  Whether the user should be unable to select a different radio button in the group.
</ParamField>

<ParamField body="render" type="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.
</ParamField>

<ParamField body="required" type="boolean" default="false">
  Whether the user must choose a value before submitting a form.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="value" type="TValue">
  The controlled value of the radio item that should be currently selected.

  To render an uncontrolled radio group, use the `defaultValue` prop instead.
</ParamField>