Create Next App

OPEN

RadioGroup

RadioGroup is a component that allows users to select one option from a set of predefined options. You can give your choice of color to it.

API Reference

Preview

import { Label } from "@/components/Label";
import { RadioGroup, RadioGroupItem } from "@/components/RadioGroup";
import React from "react";

const Page = () => {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem
          value="default"
          id="r1"
          border_color="border-violet-800"
          fill_color="fill-violet-800"
        />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem
          value="default"
          id="r1"
          border_color="border-violet-800"
          fill_color="fill-violet-800"
        />
        <Label htmlFor="r1">Comfortable</Label>
      </div>
    </RadioGroup>
  );
};

export default Page;

Examples

Popover with background color

Default

Comfortable

Compact

Install the following dependencies:

npm install @radix-ui/react-radio-group

Copy and paste the following code into your project.


"use client";

import * as React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { Circle } from "lucide-react";
import { cn } from "@/lib/utils";

interface RadioGroupProps {
  border_color?: string;
  fill_color?: string;
}

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  );
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &
    RadioGroupProps
>(
  (
    {
      border_color = "border-gray-800",
      fill_color = "fill-gray-800",
      className,
      children,
      ...props
    },
    ref
  ) => {
    return (
      <RadioGroupPrimitive.Item
        ref={ref}
        className={cn(
          `h-4 w-4 rounded-full border ${border_color} text-gray-800 ring-offset-slate-200 focus:outline-none focus-visible:ring-1 focus-visible:ring-slate-100 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
          className
        )}
        {...props}
      >
        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
          <Circle className={`h-2.5 w-2.5 stroke-none ${fill_color} `} />
        </RadioGroupPrimitive.Indicator>
      </RadioGroupPrimitive.Item>
    );
  }
);
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { RadioGroup, RadioGroupItem };