Radio Group

npx shadcn@latest add https://ui.saasflare.io/r/radio-group.json

pnpm add @saasflare/ui

"use client"import { Label, RadioGroup, RadioGroupItem } from "@saasflare/ui"/** A radio group with labelled options and a default selection. */export function Demo() {    return (        <RadioGroup defaultValue="monthly">            <div className="flex items-center gap-2">                <RadioGroupItem value="monthly" id="monthly" />                <Label htmlFor="monthly">Monthly — $12/mo</Label>            </div>            <div className="flex items-center gap-2">                <RadioGroupItem value="yearly" id="yearly" />                <Label htmlFor="yearly">Yearly — $120/yr</Label>            </div>            <div className="flex items-center gap-2">                <RadioGroupItem value="lifetime" id="lifetime" />                <Label htmlFor="lifetime">Lifetime — $399</Label>            </div>        </RadioGroup>    )}

"use client"import { useState } from "react"import { Label, RadioGroup, RadioGroupItem } from "@saasflare/ui"/** A controlled radio group reflecting the selected value. */export function Demo() {    const [value, setValue] = useState("dark")    return (        <div className="flex flex-col gap-3">            <RadioGroup value={value} onValueChange={setValue}>                <div className="flex items-center gap-2">                    <RadioGroupItem value="light" id="theme-light" />                    <Label htmlFor="theme-light">Light</Label>                </div>                <div className="flex items-center gap-2">                    <RadioGroupItem value="dark" id="theme-dark" />                    <Label htmlFor="theme-dark">Dark</Label>                </div>                <div className="flex items-center gap-2">                    <RadioGroupItem value="system" id="theme-system" />                    <Label htmlFor="theme-system">System</Label>                </div>            </RadioGroup>            <p className="text-sm text-muted-foreground">Theme: {value}</p>        </div>    )}