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

> Render one option in a mutually exclusive radio group.

`Radio` represents one option inside [RadioGroup](/ui/components/input/radio-group). Give each option a distinct `value` and a visible label. The group owns the selected value.

## Labeled options

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

export const ContactMethod = () => (
  <RadioGroup
    name="contactMethod"
    defaultValue="email"
    aria-label="Preferred contact method"
  >
    <label>
      <Radio value="email" />
      Email
    </label>
    <label>
      <Radio value="phone" />
      Phone
    </label>
    <label>
      <Radio value="post" disabled />
      Postal mail (unavailable)
    </label>
  </RadioGroup>
);
```

The `size` prop accepts `sm` or `md` and defaults to `sm`. Use the same size for options in a group.

## Keyboard and selection

Tab enters or leaves the group. Arrow keys move between enabled options and select the focused option. Space selects the focused radio. Selection and change handlers belong on `RadioGroup`; see its [controlled example](/ui/components/input/radio-group#controlled-state).

`Radio` is generic over the value type. Keep that type consistent with its group. Native attributes such as `aria-describedby` can associate an option with additional help text.

## 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: RadioRootState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

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

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

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

<ParamField body="readOnly" type="boolean">
  Whether the user should be unable to select the radio button.
</ParamField>

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

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

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;" default="sm">
  Visual size of the radio.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: RadioRootState) => 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" required>
  The unique identifying value of the radio in a group.
</ParamField>