Radio Group Card

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

This component uses Radix UI

import { RadioGroupCard, RadioGroupCardItem } from 'ui'
 
export function RadioGroupDemo() {
  return (
    <RadioGroupCard defaultValue="comfortable" className="flex flex-wrap gap-3" aria-label="Size">
      <RadioGroupCardItem value="default" label="Default" />
      <RadioGroupCardItem value="comfortable" label="Comfortable" />
      <RadioGroupCardItem value="compact" label="Compact" />
    </RadioGroupCard>
  )
}

Usage

import { RadioGroupCard, RadioGroupCardItem } from 'ui'

<RadioGroupCard defaultValue="comfortable" aria-label="Size">
  <RadioGroupCardItem value="default" label="Default" />
  <RadioGroupCardItem value="comfortable" label="Comfortable" />
  <RadioGroupCardItem value="compact" label="Compact" />
</RadioGroupCard>

Radio Group Card

Usage

Examples

With children

Form