Radio

A customizable radio button component for selecting one option from a group.

How was your experience?
import { Radio, RadioGroup, RadioIndicator } from "@/components/ui/radio/radio";
import styles from "./radio-demo.module.css";

export default function RadioDemo() {
  return (
    <div className={styles.container}>
      <RadioGroup aria-label="Select a size">
        <div className={styles.title}>How was your experience?</div>

        <label className={styles.item}>
          <Radio value="pleasant">
            <RadioIndicator />
          </Radio>
          Pleasant
        </label>

        <label className={styles.item}>
          <Radio value="neutral">
            <RadioIndicator />
          </Radio>
          Neutral
        </label>

        <label className={styles.item}>
          <Radio value="unpleasant">
            <RadioIndicator />
          </Radio>
          Unpleasant
        </label>
      </RadioGroup>
    </div>
  );
}

npx shadcn@latest add @roiui/radio
npx shadcn@latest add @roiui/radio-tailwind

anatomy
<RadioGroup>
  <Radio>
      <RadioIndicator />
  </Radio>
</RadioGroup>