form · Normal DOM only

Radio · RadioGroup

Pick exactly one value out of a small set. Always grouped — never use a lone Radio.

For mutually exclusive choices where the user wants to see all options at once (≤ 5 typical). For ≥ 6 options, or values the user knows by name, prefer Select / Combobox. For two opposite states ("active / archived") prefer Switch or ToggleGroup.

Inside a Twenty front-component, prefer the bridge import

This Radio · RadioGroup is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Radio } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Radio, RadioGroup } from '@8maverik8/twenty-design';

Examples

Pricing model

Annual

Monthly

Custom (admin)

tsx
<RadioGroup defaultValue="annual" direction="row" gap="3">
  <Radio value="annual" id="annual" label="Annual" />
  <Radio value="monthly" id="monthly" label="Monthly" />
  <Radio value="locked" id="locked" label="Custom (admin)" disabled />
</RadioGroup>

Vertical (long labels)

Email digest at 9:00

Real-time push notifications

Don’t notify me

tsx
<RadioGroup defaultValue="email" direction="column" gap="2">
  <Radio value="email" id="rv-email" label="Email digest at 9:00" />
  <Radio value="realtime" id="rv-real" label="Real-time push notifications" />
  <Radio value="off" id="rv-off" label="Don’t notify me" />
</RadioGroup>

Guidelines

✓

Always wrap Radios in a RadioGroup with a name.Browsers manage exclusivity via the shared name attribute; screen readers announce the group.

✓

Disable the locked option and show why (tooltip or hint).Removing the option hides what the user wanted; disabling it explains.

Use a single Radio.A single choice without an alternative should be a Checkbox.