Radio group

Preview

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


export function RadioGroupDemo() {
    return (
        <RadioGroup defaultValue="comfortable" className="flow">
            <Label htmlFor="r1">
                <RadioGroupItem value="default" id="r1" />
                Default
            </Label>
            <Label htmlFor="r2">
                <RadioGroupItem value="comfortable" id="r2" />
                Comfortable
            </Label>
            <Label htmlFor="r3">
                <RadioGroupItem value="compact" id="r3" />
                Compact
            </Label>
        </RadioGroup>
    );
}

Installation

You can add the dialog component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the dialog component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components radio-group --framework react
npx make-sugarcube@latest components radio-group --framework react
yarn make-sugarcube@latest components radio-group --framework react
bunx --bun make-sugarcube@latest components radio-group --framework react

What’s included

When you add the label component, you get:

  • label.tsx - The React component implementation
  • label.tokens.json - The CSS variables that map to your design tokens
  • @clsx - The clsx utility for conditional classes
"use client";


import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { CircleIcon } from "lucide-react";
import type * as React from "react";


import cn from "clsx";


function RadioGroup({
    className,
    ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
    return <RadioGroupPrimitive.Root className={cn("radio-group", className)} {...props} />;
}


function RadioGroupItem({
    className,
    ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
    return (
        <RadioGroupPrimitive.Item className={cn("radio-group-item", className)} {...props}>
            <RadioGroupPrimitive.Indicator className="radio-group-indicator">
                <CircleIcon />
            </RadioGroupPrimitive.Indicator>
        </RadioGroupPrimitive.Item>
    );
}


export { RadioGroup, RadioGroupItem };

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::