Radio Group

Radio Group

A set of checkable buttons - known as radio buttons - where no more than one of the buttons can be checked at a time.


Install the following dependencies

npm i @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 { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { radioGroup } from '@shadow-panda/styled-system/recipes'
const { withProvider, withContext } = createStyleContext(radioGroup)
const Indicator = withContext(RadioGroupPrimitive.Indicator, 'indicator')
const Icon = withContext(Circle, 'icon')
const Item = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ children: _children, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item ref={ref} {...props}>
        <Icon />
Item.displayName = RadioGroupPrimitive.Item.displayName
export const RadioGroup = withProvider(styled(RadioGroupPrimitive.Root), 'root')
export const RadioGroupItem = withContext(styled(Item), 'item')

Update the import paths to match your project setup


import { Flex } from '@shadow-panda/styled-system/jsx'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
<RadioGroup defaultValue="option-one">
  <Flex alignItems="center" spaceX="2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  <Flex alignItems="center" spaceX="2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>