Radio Card Group

A group of selectable card options where only one option can be selected at a time.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/radio-card-group/radio-card-group.tsx

import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
import * as React from 'react'
import { radioCardGroupStyles } from './radio-card-group.css'
 
const RadioCardGroup = React.forwardRef<
  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, forwardedRef) => {
  const styles = radioCardGroupStyles()
  return (
    <RadioGroupPrimitive.Root
      ref={forwardedRef}
      className={styles.root({ className })}
      {...props}
    />
  )
})
 
const RadioCardItem = React.forwardRef<
  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, forwardedRef) => {
  const styles = radioCardGroupStyles()
  return (
    <RadioGroupPrimitive.Item
      ref={forwardedRef}
      className={styles.item({ className })}
      {...props}
    />
  )
})
 
const RadioCardIndicator = React.forwardRef<
  React.ComponentRef<typeof RadioGroupPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>
>(({ className, ...props }, forwardedRef) => {
  const styles = radioCardGroupStyles()
  return (
    <div className={styles.indicatorContainer({ className })}>
      <RadioGroupPrimitive.Indicator ref={forwardedRef} className={styles.indicator()} {...props}>
        <div className={styles.indicatorInner()} />
      </RadioGroupPrimitive.Indicator>
    </div>
  )
})
 
RadioCardGroup.displayName = 'RadioCardGroup'
RadioCardItem.displayName = 'RadioCardItem'
RadioCardIndicator.displayName = 'RadioCardIndicator'
 
export { RadioCardGroup, RadioCardIndicator, RadioCardItem }

Usage

Imports

import {
  RadioCardGroup,
  RadioCardIndicator,
  RadioCardItem
} from '#/components/radio-card-group'

Example

Browse the Storybook for more examples.