Radio

SystemLightDark

import { RadioGroup, Radio } from "@registry/components/ui/radio";

export function RadioExample() {
  return (
    <RadioGroup defaultValue="system">
      <label className="flex items-center gap-2 text-sm">
        <Radio value="system" />
        System
      </label>
      <label className="flex items-center gap-2 text-sm">
        <Radio value="light" />
        Light
      </label>
      <label className="flex items-center gap-2 text-sm">
        <Radio value="dark" />
        Dark
      </label>
    </RadioGroup>
  );
}

Examples

Disabled

Use the disabled prop on individual radio items to prevent interaction.

SystemLightDark

import { RadioGroup, Radio } from "@registry/components/ui/radio";

export function RadioDisabledExample() {
  return (
    <RadioGroup defaultValue="system">
      <label className="flex items-center gap-2 text-sm">
        <Radio value="system" />
        System
      </label>
      <label className="flex items-center gap-2 text-sm">
        <Radio value="light" disabled />
        Light
      </label>
      <label className="flex items-center gap-2 text-sm">
        <Radio value="dark" />
        Dark
      </label>
    </RadioGroup>
  );
}

Controlled

Manage the selected value with React state using value and onValueChange on the group.

SystemLightDark

Selected: system

import { useState } from "react";
import { RadioGroup, Radio } from "@registry/components/ui/radio";

export function RadioControlledExample() {
  const [value, setValue] = useState("system");

  return (
    <div className="flex flex-col gap-4">
      <RadioGroup value={value} onValueChange={setValue}>
        <label className="flex items-center gap-2 text-sm">
          <Radio value="system" />
          System
        </label>
        <label className="flex items-center gap-2 text-sm">
          <Radio value="light" />
          Light
        </label>
        <label className="flex items-center gap-2 text-sm">
          <Radio value="dark" />
          Dark
        </label>
      </RadioGroup>
      <span className="text-sm text-gray-600 dark:text-gray-400">Selected: {value}</span>
    </div>
  );
}

RadioGroupItem

The RadioGroupItem alias is also available if you prefer that naming convention.

DefaultCompact

import { RadioGroup, RadioGroupItem } from "@registry/components/ui/radio";

export function RadioGroupItemExample() {
  return (
    <RadioGroup defaultValue="default">
      <label className="flex items-center gap-2 text-sm">
        <RadioGroupItem value="default" />
        Default
      </label>
      <label className="flex items-center gap-2 text-sm">
        <RadioGroupItem value="compact" />
        Compact
      </label>
    </RadioGroup>
  );
}

Installation

Copy the source code below into your project:

import { Radio as RadioPrimitive } from "@base-ui/react/radio";
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
import { cn } from "@registry/lib/utils";

function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
  return (
    <RadioGroupPrimitive
      className={cn("flex flex-col gap-3", className)}
      data-slot="radio-group"
      {...props}
    />
  );
}

function Radio({ className, ...props }: RadioPrimitive.Root.Props) {
  return (
    <RadioPrimitive.Root
      className={cn(
        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-muted bg-clip-padding outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:aria-invalid:ring-destructive/24 [:disabled,[data-checked],[aria-invalid]]:shadow-none",
        className,
      )}
      data-slot="radio"
      {...props}
    >
      <RadioPrimitive.Indicator
        className="absolute -inset-px flex size-4 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary data-unchecked:hidden"
        data-slot="radio-indicator"
      />
    </RadioPrimitive.Root>
  );
}

export { RadioGroup, Radio, Radio as RadioGroupItem };

API Reference

RadioGroup

This component does not add any props on top of Base UI RadioGroup . See the Base UI docs for the full API reference.

This component does not add any props on top of Base UI Radio . See the Base UI docs for the full API reference.