Component
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.
Installation
Install the following dependencies
npm i @radix-ui/react-radio-groupCopy and paste the following code into your project
components/ui/radio-group/index.tsx
'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}>
<Indicator>
<Icon />
</Indicator>
</RadioGroupPrimitive.Item>
)
})
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
Usage
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>
<Flex alignItems="center" spaceX="2">
<RadioGroupItem value="option-two" id="option-two" />
<Label htmlFor="option-two">Option Two</Label>
</Flex>
</RadioGroup>