Radio Group

A set of checkable buttons where only one can be checked at a time.

<RadioGroup defaultValue="comfortable">
  <RadioGroupItem value="default">Default</RadioGroupItem>
  <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
  <RadioGroupItem value="compact">Compact</RadioGroupItem>
</RadioGroup>

Installation

pnpm dlx cubix@latest add radio-group --base aria

Usage

Import

import { RadioGroup, RadioGroupItem } from "@/components/cubix/radio-group"

Example

<RadioGroup defaultValue="comfortable">
  <RadioGroupItem value="default">Default</RadioGroupItem>
  <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
  <RadioGroupItem value="compact">Compact</RadioGroupItem>
</RadioGroup>

Examples

With description

Compose each radio with a title and supporting text for settings and plan pickers.

FreeFor personal projects and experiments.ProFor teams that need extra components and support.

<RadioGroup defaultValue="pro" className="w-full max-w-sm">
  <label className="flex items-start gap-3 rounded-lg border p-4 has-checked:border-primary">
    <RadioGroupItem value="free" className="mt-0.5" />
    <span className="grid gap-1.5 leading-none">
      <span className="font-medium">Free</span>
      <span className="text-sm text-muted-foreground">
        For personal projects and experiments.
      </span>
    </span>
  </label>
  <label className="flex items-start gap-3 rounded-lg border p-4 has-checked:border-primary">
    <RadioGroupItem value="pro" className="mt-0.5" />
    <span className="grid gap-1.5 leading-none">
      <span className="font-medium">Pro</span>
      <span className="text-sm text-muted-foreground">
        For teams that need extra components and support.
      </span>
    </span>
  </label>
</RadioGroup>

Disabled

Disable the whole group, or a single option.

<div className="grid gap-6">
  <RadioGroup defaultValue="one" disabled>
    <RadioGroupItem value="one">All options locked</RadioGroupItem>
    <RadioGroupItem value="two">Cannot change</RadioGroupItem>
  </RadioGroup>
  <RadioGroup defaultValue="email">
    <RadioGroupItem value="email">Email</RadioGroupItem>
    <RadioGroupItem value="sms" disabled>SMS (unavailable)</RadioGroupItem>
    <RadioGroupItem value="push">Push</RadioGroupItem>
  </RadioGroup>
</div>

Sizes

Default

<div className="grid gap-6">
  <RadioGroup defaultValue="default">
    <RadioGroupItem value="default" />
  </RadioGroup>
</div>

Horizontal

Set className="flex flex-row" to place options in a row.

LeftCenterRight

<RadioGroup defaultValue="left" className="flex flex-row gap-4">
  <RadioGroupItem value="left" />
  <RadioGroupItem value="center" />
  <RadioGroupItem value="right" />
</RadioGroup>

API Reference

RadioGroup

The container that manages selection, the shared form name, and layout.

Prop	Type	Default	Description
value	string	-	Controlled selected value. Use with `onValueChange`.
defaultValue	string	-	Initial selected value for uncontrolled usage.
onValueChange	(value: string) => void	-	Called with the next value whenever a radio is selected.
name	string	-	Shared name submitted with the form. Generated automatically when omitted.
disabled	boolean	false	Disables every radio in the group.
required	boolean	false	Marks the group as required for native form validation.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'div'>	-	All native div attributes (id, aria-label, aria-labelledby, ...) are forwarded to the radiogroup.

RadioGroupItem

A single option. Must be rendered inside RadioGroup. Pass children to render a label, or compose your own.

Prop	Type	Default	Description
value	string	-	Value submitted when this radio is selected. Required.
disabled	boolean	false	Disables this radio independently of the group.
aria-invalid	boolean	false	When true, indicates the radio is in an invalid state.
className	string	-	Additional Tailwind classes merged onto the radio wrapper (last one wins).
...props	React.ComponentProps<'input'>	-	All native radio attributes (id, form, tabindex, aria-*, ...) are forwarded to the rendered input.

Variants

Prop	Type	Default	Description
default	-	-	Checked state with primary background and a filled indicator.
disabled	-	-	Disabled radios cannot be interacted with.