Radio

Radio represents one option inside RadioGroup. Give each option a distinct value and a visible label. The group owns the selected value.

Usage

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

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

Visual choices

Compare selected and disabled states, sizes, and the default and card appearances. Use a labeled group of options for an actual choice.

Complete parts

Radio.Root and Radio.Indicator expose the installed Base UI parts without the styled assembly. Compose them when you need custom content or indicator placement. The callable Radio supplies Twenty’s radio appearance and indicator for common options.

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

Standard radios and Radio.Root render a span with radio semantics and an adjacent hidden native input. Card radios render a div. ref targets the rendered root; inputRef targets the input. Radio.Indicator renders a span and its ref targets that element. render, state-based className and style, native attributes and event handlers retain their upstream contracts. The public types include RadioProps, RadioRootProps, RadioRootState, RadioIndicatorProps and RadioIndicatorState.

Card options

Use variant="card" for full-width options with an inset radio indicator. Card radios keep their div root by default. Use render to choose another element explicitly. When that element is a native button, also set nativeButton. Keep interactive controls outside the card content. Give the group enough width for its content and leave space for the indicator at the top right. A title, icon, and short description help explain each choice.

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

Explicit native composition

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

The ref targets the composed button. For custom non-button roots, leave nativeButton false and forward the supplied render props and ref to the actual element.

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. The installed Base UI radio suppresses Enter selection for both default roots and composed native buttons. Selection and change handlers belong on RadioGroup; see its uncontrolled example and controlled example. Radio arrows change selection as they move focus. Dropdown.SelectionGroup moves focus with arrows and commits a choice with Enter or Space. Radio and Radio.Root are 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.

ReactNode

Option content. Card options wrap it in a padded full-width content area.

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

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

boolean

Whether the component should ignore user interaction.

Ref<HTMLInputElement>

A ref to access the hidden input element.

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.

boolean

Whether the user should be unable to select the radio button.

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.

boolean

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

"md" | "sm"

default:"sm"

Visual size of the radio.

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

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

TValue

required

The unique identifying value of the radio in a group.

"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

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

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

boolean

Whether the component should ignore user interaction.

Ref<HTMLInputElement>

A ref to access the hidden input element.

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.

boolean

Whether the user should be unable to select the radio button.

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.

boolean

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

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

required

The unique identifying value of the radio in a group.

Radio.Indicator

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

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

boolean

default:"false"

Whether to keep the HTML element in the DOM when the radio button is inactive.

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.

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

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

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

Visual choices

Complete parts

Card options

Explicit native composition

Keyboard and selection

Props

Radio.Root

Radio.Indicator

​Usage

​Visual choices

​Complete parts

​Card options

​Explicit native composition

​Keyboard and selection

​Props

​Radio.Root

​Radio.Indicator

Usage

Visual choices

Complete parts

Card options

Explicit native composition

Keyboard and selection

Props

Radio.Root

Radio.Indicator