Icon Radio Group Button

[mweel1]

"use client";

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

import { cn } from "../lib/utils";

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

const ButtonGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  {
    icon: React.ReactNode;
    label: string;
  } & React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, icon, label, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "border data-[state=checked]:bg-background text-center h-[125px] w-[125px] rounded-md focus:outline-none 2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.RadioGroupIndicator className="relative">
        <div className="relative">
          <div className="absolute -ml-2 -mt-[30px] ">
            <Icons.checkCircle className="text-primary" />
          </div>
        </div>
      </RadioGroupPrimitive.RadioGroupIndicator>

      <div className="flex flex-col justify-center">
        <div className="self-center">{icon}</div>
        <div className="text-sm pt-2">{label}</div>
      </div>
    </RadioGroupPrimitive.Item>
  );
});
ButtonGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { ButtonGroup, ButtonGroupItem };

[beeloon]

@mweel1 Thank you very much, that's exactly what I've searched!
Unfortunately, shadcn docs do not have a lot of examples how to do staff like this, so your gist was very helpful 🙇

[caturbgs]

@mweel1 OMG you're my savior. Stuff like this should be documented somewhere to utilize the usage of the shadcn-UI 🔥🔥🔥

[yashsehgal]

Thanks for sharing this gist here @mweel1 ❤️

[robcrock]

@mweel1 have you thought about contributing this code to Shadcn/ui? I find myself looking for non-standard Radio Groups often. This would be a great addition!

[bfourgeaud]

You could also use ToggleGroup from shadcn which an handle single or multiple selection ?

[pencilcheck]

Woohoo

[mandrillxx]

this is exactly what i was looking for, thanks for sharing!