RadioGroup — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download radio-group -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable" disabled={false}>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>;

Examples

Default

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable" >
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>;

Disabled

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable" disabled>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="default" id="d1" />
    <Label htmlFor="d1">Default</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="d2" />
    <Label htmlFor="d2">Comfortable</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="d3" />
    <Label htmlFor="d3">Compact</Label>
  </div>
</RadioGroup>;

Form

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
<div className="grid gap-3">
  <Label>Notify me about...</Label>
  <RadioGroup defaultValue="all">
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="all" id="f1" />
      <Label htmlFor="f1">All new messages</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="mentions" id="f2" />
      <Label htmlFor="f2">Direct messages and mentions</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="none" id="f3" />
      <Label htmlFor="f3">Nothing</Label>
    </div>
  </RadioGroup>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

This component adds no props of its own to Radix UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.