Radio
A customizable radio button component for selecting one option from a group.
Choose your preferred size
import { RadioGroup, Radio, RadioIndicator } from "@/components/ui/radio/radio";
import styles from "./radio-demo.module.css";
export default function RadioDemo() {
return (
<div className={styles.container}>
<RadioGroup defaultValue="comfortable" aria-label="Select a size">
<div className={styles.title}>Choose your preferred size</div>
<div className={styles.radioItem}>
<Radio value="comfortable" id="comfortable">
<RadioIndicator />
</Radio>
<label htmlFor="comfortable" className={styles.label}>
Comfortable
</label>
</div>
<div className={styles.radioItem}>
<Radio value="compact" id="compact">
<RadioIndicator />
</Radio>
<label htmlFor="compact" className={styles.label}>
Compact
</label>
</div>
<div className={styles.radioItem}>
<Radio value="spacious" id="spacious">
<RadioIndicator />
</Radio>
<label htmlFor="spacious" className={styles.label}>
Spacious
</label>
</div>
</RadioGroup>
</div>
);
}
Installation
npx shadcn@latest add https://roiui.com/r/radio.json
Anatomy
anatomy
import {
RadioGroup,
Radio,
RadioIndicator,
} from '../ui/radio'
<RadioGroup>
<Radio>
<RadioIndicator />
</Radio>
</RadioGroup>