Radio Group

1"use client"23import { createSignal } from "@barefootjs/dom"4import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"56export function RadioGroupBasicDemo() {7  const [density, setDensity] = createSignal("default")89  return (10    <div className="space-y-4">11      <RadioGroup defaultValue="default" onValueChange={setDensity}>12        <div className="flex items-center space-x-2">13          <RadioGroupItem value="default" />14          <span className="text-sm font-medium leading-none">Default</span>15        </div>16        <div className="flex items-center space-x-2">17          <RadioGroupItem value="comfortable" />18          <span className="text-sm font-medium leading-none">Comfortable</span>19        </div>20        <div className="flex items-center space-x-2">21          <RadioGroupItem value="compact" />22          <span className="text-sm font-medium leading-none">Compact</span>23        </div>24      </RadioGroup>25      <div className="text-sm text-muted-foreground pt-2 border-t">26        Selected: {density()}27      </div>28    </div>29  )30}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"56export function RadioGroupFormDemo() {7  const [notifyType, setNotifyType] = createSignal("all")8  const [theme, setTheme] = createSignal("system")910  const summary = createMemo(() =>11    `Notifications: ${notifyType()}, Theme: ${theme()}`12  )1314  return (15    <div className="space-y-6">16      <div className="space-y-3">17        <h4 className="text-sm font-medium leading-none">Notify me about...</h4>18        <RadioGroup defaultValue="all" onValueChange={setNotifyType}>19          <div className="flex items-center space-x-2">20            <RadioGroupItem value="all" />21            <span className="text-sm leading-none">All new messages</span>22          </div>23          <div className="flex items-center space-x-2">24            <RadioGroupItem value="mentions" />25            <span className="text-sm leading-none">Direct messages and mentions</span>26          </div>27          <div className="flex items-center space-x-2">28            <RadioGroupItem value="none" />29            <span className="text-sm leading-none">Nothing</span>30          </div>31        </RadioGroup>32      </div>33      <div className="space-y-3">34        <h4 className="text-sm font-medium leading-none">Theme</h4>35        <RadioGroup defaultValue="system" onValueChange={setTheme}>36          <div className="flex items-center space-x-2">37            <RadioGroupItem value="light" />38            <span className="text-sm leading-none">Light</span>39          </div>40          <div className="flex items-center space-x-2">41            <RadioGroupItem value="dark" />42            <span className="text-sm leading-none">Dark</span>43          </div>44          <div className="flex items-center space-x-2">45            <RadioGroupItem value="system" />46            <span className="text-sm leading-none">System</span>47          </div>48        </RadioGroup>49      </div>50      <div className="text-sm text-muted-foreground pt-2 border-t">51        {summary()}52      </div>53    </div>54  )55}

1"use client"23import { createSignal } from "@barefootjs/dom"4import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"56const plans = [7  { value: "startup", name: "Startup", price: "$29", description: "For small teams getting started" },8  { value: "business", name: "Business", price: "$99", description: "For growing companies" },9  { value: "enterprise", name: "Enterprise", price: "$299", description: "For large organizations" },10]1112export function RadioGroupCardDemo() {13  const [plan, setPlan] = createSignal("startup")1415  return (16    <div className="space-y-4">17      <RadioGroup defaultValue="startup" onValueChange={setPlan} class="grid-cols-1 sm:grid-cols-3">18        {plans.map((p) => (19          <div key={p.value} className="relative">20            <div className="flex items-start space-x-3 rounded-lg border p-4 hover:bg-accent/50 cursor-pointer">21              <RadioGroupItem value={p.value} />22              <div className="space-y-1">23                <span className="text-sm font-medium leading-none">{p.name}</span>24                <p className="text-xl font-bold text-foreground">25                  {p.price}<span className="text-sm font-normal text-muted-foreground">/mo</span>26                </p>27                <p className="text-sm text-muted-foreground">{p.description}</p>28              </div>29            </div>30          </div>31        ))}32      </RadioGroup>33      <div className="text-sm text-muted-foreground pt-2 border-t">34        Selected plan: {plan()}35      </div>36    </div>37  )38}