Cognition

Components

Radio Group

A single-select control where exactly one option can be chosen from a visible set. Selecting one option clears the others.

Preview

For individuals getting started. Up to 3 projects.

For growing teams. Unlimited projects and priority support.

Custom limits, SSO, and a dedicated success manager.

Rendered with live Cognition tokens. Toggle the theme and it remaps, no dark: classes.

Variants

<RadioGroup defaultValue="comfortable">
  <RadioGroupItem value="default" id="default" />
  <Label htmlFor="default">Default</Label>
</RadioGroup>

Pay with a credit or debit card.

Receive a monthly invoice by email.

<RadioGroupLabeledOption
  value="card"
  label="Card"
  description="Pay with a credit or debit card."
/>

Pair each item with a Label, or use RadioGroupLabeledOption to add a supporting description.

States

<RadioGroup defaultValue="b">
<RadioGroupItem value="b" disabled />
<RadioGroup defaultValue="a" disabled>

Selected fills the dot with the brand primary. Disable a single item with its disabled prop, or the whole group with disabled on RadioGroup.

API

Prop
Type
Default
Description
defaultValue
string
undefined
Value selected on mount when the group is uncontrolled.
value
string
undefined
Selected value when the group is controlled.
onValueChange
(value: string) => void
undefined
Called with the new value when the selection changes.
disabled
boolean
false
Disables every option in the group. Single items also take their own disabled prop.
orientation
"horizontal" | "vertical"
"vertical"
Reading and arrow-key direction. Lay items out to match with a flex or grid className.

Props apply to RadioGroup. Each RadioGroupItem takes a value and its own disabled.

Don't and Do

Don't

Don't use a Radio Group when more than one option can be selected at once. A radio group enforces a single choice, so two selections cannot coexist. When several options may be on together, reach for Checkbox instead.

Do
<RadioGroup defaultValue="weekly">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="weekly" id="weekly" />
    <Label htmlFor="weekly">Weekly</Label>
  </div>
</RadioGroup>

Use a Radio Group when exactly one option must be chosen from a set the reader can see all at once.

import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

export function Cadence() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="default" />
        <Label htmlFor="default">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="comfortable" />
        <Label htmlFor="comfortable">Comfortable</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="compact" id="compact" />
        <Label htmlFor="compact">Compact</Label>
      </div>
    </RadioGroup>
  );
}