Docs
Radio Group Card

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">
      <RadioGroupCardItem value="default" id="r1" label="Default" />
      <RadioGroupCardItem value="comfortable" id="r2" label="Comfortable" />
      <RadioGroupCardItem value="compact" id="r3" label="Compact" />
    </RadioGroupCard>
  )
}

Usage

import { RadioGroupCard, RadioGroupCardItem } from 'ui'
<RadioGroupCard defaultValue="comfortable">
  <RadioGroupCardItem value="default" id="r1" label="Default" />
  <RadioGroupCardItem value="comfortable" id="r2" label="Comfortable" />
  <RadioGroupCardItem value="compact" id="r3" label="Compact" />
</RadioGroupCard>

Examples

With children

Form

PreviousRadio Group Stacked
NextResizable