RadixUI styling Radio groups

Question

I am fairly new to Radix UI (with Shadcn/ui) and styling components for that matter. Couldn't figure out a solution for adapting a JSX component to Radix UI:

I am using Radix UI Radio Groups & want to style my component which would look like this upon selection, basically it's this component from Hyper UI called grid with stacked content and checked:

Some notes

I am using NextJS 13, typescript and well, React :D
With small adjustment to my code below I can make that radio icon would appear upon select, but not borders wont get active.
The idea is to have the block border to have these borders (not selected ones will have a thin border.
Currently in the code I added {children} to RadioGroupPrimitive.Indicator I know it's wrong as it only handles the button, so the text appears only on select.

I was thinking that I should play with labels somehow, but as the selection is the whole block + icon it seems that I cant put the title and subtitle correctly inside.

I currently am trying to play around and what I came around to is:

const RadioGroupItemModern = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, children, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        `block w-full bg-white p-3 hover:border-gray-200 focus:outline-none checked:ring-primary `,
        // "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >

    
        <RadioGroupPrimitive.Indicator className="p-4 cursor-pointer rounded-lg border ring-2 ring-primary flex justify-between items-center hover:border-gray-200 focus:ring-2" >
        <div>{children}</div>
          <Icons.checkCircle3 className="h-6 w-6 text-current" />
        </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>


  )
})
RadioGroupItemModern.displayName = RadioGroupPrimitive.Item.displayName

And my front-end call would look like this:

<RadioGroupItemModern key={choice.value} value={choice.value} id={choice.value} defaultValue={field.value || ''} >
    <div>
    <RadioGroupItemTitle>{choice.text}</RadioGroupItemTitle>
    <RadioGroupItemSubtitle>{choice.description}</RadioGroupItemSubtitle>
    </div>
</RadioGroupItemModern>

So now it only shows me the required result when I press the selection (which in this case is invisible).

I tried playing around with the Radix Primitives, adding children in different ways but as I can't figure out the logic on how this would work correctly can't figure out a way as Radix has group radio and labels next to them as different components.

RadixUI styling Radio groups

0 Answers0