Radio Group

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <RadioGroup defaultValue="comfortable">6      <label className="flex items-center gap-2.5 text-sm tracking-wide">7        <RadioGroupItem value="default" id="r-basic-default" />8        Default9      </label>10      <label className="flex items-center gap-2.5 text-sm tracking-wide">11        <RadioGroupItem value="comfortable" id="r-basic-comfortable" />12        Comfortable13      </label>14      <label className="flex items-center gap-2.5 text-sm tracking-wide">15        <RadioGroupItem value="compact" id="r-basic-compact" />16        Compact17      </label>18    </RadioGroup>19  )20}

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <RadioGroup defaultValue="comfortable">6      <label className="flex items-center gap-2.5 text-sm tracking-wide">7        <RadioGroupItem value="default" id="r-basic-default" />8        Default9      </label>10      <label className="flex items-center gap-2.5 text-sm tracking-wide">11        <RadioGroupItem value="comfortable" id="r-basic-comfortable" />12        Comfortable13      </label>14      <label className="flex items-center gap-2.5 text-sm tracking-wide">15        <RadioGroupItem value="compact" id="r-basic-compact" />16        Compact17      </label>18    </RadioGroup>19  )20}

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <RadioGroup defaultValue="comfortable">6      <label className="flex items-start gap-2.5">7        <RadioGroupItem8          value="default"9          id="r-desc-default"10          className="mt-0.5"11        />12        <span className="grid gap-1">13          <span className="text-sm font-medium tracking-wide">Default</span>14          <span className="text-sm text-muted-foreground">15            Standard spacing for most use cases.16          </span>17        </span>18      </label>19      <label className="flex items-start gap-2.5">20        <RadioGroupItem21          value="comfortable"22          id="r-desc-comfortable"23          className="mt-0.5"24        />25        <span className="grid gap-1">26          <span className="text-sm font-medium tracking-wide">27            Comfortable28          </span>29          <span className="text-sm text-muted-foreground">30            More space between elements.31          </span>32        </span>33      </label>34      <label className="flex items-start gap-2.5">35        <RadioGroupItem36          value="compact"37          id="r-desc-compact"38          className="mt-0.5"39        />40        <span className="grid gap-1">41          <span className="text-sm font-medium tracking-wide">Compact</span>42          <span className="text-sm text-muted-foreground">43            Minimal spacing for dense layouts.44          </span>45        </span>46      </label>47    </RadioGroup>48  )49}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"4import { cn } from "@/lib/utils"56export function Example() {7  const [plan, setPlan] = React.useState("pro")89  return (10    <RadioGroup value={plan} onValueChange={setPlan} className="w-full gap-3">11      <label className="block w-full cursor-pointer">12        <Card className={cn("py-0", plan !== "plus" && "bg-transparent")}>13          <CardContent className="flex items-start gap-2.5 px-2.5 py-2.5">14            <RadioGroupItem value="plus" id="r-card-plus" className="mt-0.5" />15            <span className="grid gap-1">16              <span className="text-sm font-medium tracking-wide">Plus</span>17              <span className="text-sm text-muted-foreground">18                For individuals and small teams.19              </span>20            </span>21          </CardContent>22        </Card>23      </label>24      <label className="block w-full cursor-pointer">25        <Card className={cn("py-0", plan !== "pro" && "bg-transparent")}>26          <CardContent className="flex items-start gap-2.5 px-2.5 py-2.5">27            <RadioGroupItem value="pro" id="r-card-pro" className="mt-0.5" />28            <span className="grid gap-1">29              <span className="text-sm font-medium tracking-wide">Pro</span>30              <span className="text-sm text-muted-foreground">31                For growing businesses.32              </span>33            </span>34          </CardContent>35        </Card>36      </label>37      <label className="block w-full cursor-pointer">38        <Card39          className={cn("py-0", plan !== "enterprise" && "bg-transparent")}40        >41          <CardContent className="flex items-start gap-2.5 px-2.5 py-2.5">42            <RadioGroupItem43              value="enterprise"44              id="r-card-enterprise"45              className="mt-0.5"46            />47            <span className="grid gap-1">48              <span className="text-sm font-medium tracking-wide">49                Enterprise50              </span>51              <span className="text-sm text-muted-foreground">52                For large teams and enterprises.53              </span>54            </span>55          </CardContent>56        </Card>57      </label>58    </RadioGroup>59  )60}

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <fieldset className="m-0 grid w-full gap-3 border-0 p-0">6      <legend className="float-left w-full p-0">7        <span className="grid gap-1 pb-3">8          <span className="text-sm font-medium tracking-wide text-foreground">9            Subscription Plan10          </span>11          <span className="text-sm font-normal text-muted-foreground">12            Yearly and lifetime plans offer significant savings.13          </span>14        </span>15      </legend>16      <RadioGroup defaultValue="yearly">17        <label className="flex items-center gap-2.5 text-sm tracking-wide">18          <RadioGroupItem value="monthly" id="r-fieldset-monthly" />19          Monthly ($9.99/month)20        </label>21        <label className="flex items-center gap-2.5 text-sm tracking-wide">22          <RadioGroupItem value="yearly" id="r-fieldset-yearly" />23          Yearly ($99.99/year)24        </label>25        <label className="flex items-center gap-2.5 text-sm tracking-wide">26          <RadioGroupItem value="lifetime" id="r-fieldset-lifetime" />27          Lifetime ($299.99)28        </label>29      </RadioGroup>30    </fieldset>31  )32}

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <RadioGroup defaultValue="option-one" disabled>6      <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">7        <RadioGroupItem value="option-one" id="r-disabled-one" />8        Option One9      </label>10      <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">11        <RadioGroupItem value="option-two" id="r-disabled-two" />12        Option Two13      </label>14      <label className="flex items-center gap-2.5 text-sm tracking-wide opacity-60">15        <RadioGroupItem value="option-three" id="r-disabled-three" />16        Option Three17      </label>18    </RadioGroup>19  )20}

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"23export function Example() {4  return (5    <div className="grid w-full gap-3">6      <div className="grid gap-1">7        <p className="text-sm font-medium tracking-wide text-destructive">8          Notification preferences9        </p>10        <p className="text-sm text-muted-foreground">11          Choose how you want to receive notifications.12        </p>13      </div>14      <RadioGroup defaultValue="email">15        <label className="flex items-center gap-2.5 text-sm tracking-wide text-destructive">16          <RadioGroupItem value="email" id="r-invalid-email" aria-invalid />17          Email only18        </label>19        <label className="flex items-center gap-2.5 text-sm tracking-wide text-destructive">20          <RadioGroupItem value="sms" id="r-invalid-sms" aria-invalid />21          SMS only22        </label>23        <label className="flex items-center gap-2.5 text-sm tracking-wide text-destructive">24          <RadioGroupItem value="both" id="r-invalid-both" aria-invalid />25          Both Email & SMS26        </label>27      </RadioGroup>28    </div>29  )30}