Radio Group

 1import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 2
 3export function RadioGroupOrb() {
 4  return (
 5    <RadioGroup label="Workspace visibility" defaultValue="private">
 6      <RadioOption
 7        value="private"
 8        label="Private"
 9        description="Only invited members can view this workspace."
10      />
11      <RadioOption
12        value="team"
13        label="Team-visible"
14        description="Every teammate in the organization can discover it."
15      />
16      <RadioOption
17        value="public"
18        label="Public"
19        description="Anyone with the link can view the overview."
20      />
21    </RadioGroup>
22  );
23}

 1import { IconBrandGithub, IconCloud, IconCode } from "@tabler/icons-react";
 2import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 3
 4export function RadioGroupCommand() {
 5  return (
 6    <RadioGroup label="Source provider" defaultValue="github" variant="command">
 7      <RadioOption
 8        value="github"
 9        label="GitHub"
10        description="Import repositories and sync preview deployments."
11        leading={<IconBrandGithub stroke={1.75} />}
12        trailing="OAuth"
13      />
14      <RadioOption
15        value="cli"
16        label="CLI upload"
17        description="Ship a local component package from your terminal."
18        leading={<IconCode stroke={1.75} />}
19      />
20      <RadioOption
21        value="cloud"
22        label="Cloud storage"
23        description="Reference an existing source bundle."
24        leading={<IconCloud stroke={1.75} />}
25      />
26    </RadioGroup>
27  );
28}

 1import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 2
 3export function RadioGroupSegment() {
 4  return (
 5    <RadioGroup defaultValue="annual" variant="segment" orientation="horizontal">
 6      <RadioOption value="monthly" label="Monthly" />
 7      <RadioOption value="annual" label="Annual" />
 8      <RadioOption value="custom" label="Custom" />
 9    </RadioGroup>
10  );
11}

 1import {
 2  IconBuildingSkyscraper,
 3  IconRocket,
 4  IconSparkles,
 5} from "@tabler/icons-react";
 6import { RadioCard, RadioGroup } from "@/components/wensity/radio-group";
 7
 8export function RadioGroupTiles() {
 9  return (
10    <RadioGroup defaultValue="pro" variant="tile">
11      <div className="grid gap-3 sm:grid-cols-3">
12        <RadioCard
13          value="free"
14          label="Free"
15          description="Explore primitives and docs."
16          eyebrow="$0"
17          leading={<IconSparkles stroke={1.75} />}
18        />
19        <RadioCard
20          value="pro"
21          label="Pro"
22          description="Use source files in production."
23          eyebrow="$19"
24          leading={<IconRocket stroke={1.75} />}
25        />
26        <RadioCard
27          value="team"
28          label="Team"
29          description="Seats, billing, and shared tokens."
30          eyebrow="Custom"
31          leading={<IconBuildingSkyscraper stroke={1.75} />}
32        />
33      </div>
34    </RadioGroup>
35  );
36}

 1"use client";
 2
 3import * as React from "react";
 4import { IconBuildingSkyscraper, IconCreditCard } from "@tabler/icons-react";
 5import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 6
 7export function RadioGroupControlled() {
 8  const [value, setValue] = React.useState("card");
 9
10  return (
11    <RadioGroup value={value} onValueChange={setValue} variant="command">
12      <RadioOption
13        value="card"
14        label="Card"
15        description="Charge the saved company card today."
16        leading={<IconCreditCard stroke={1.75} />}
17      />
18      <RadioOption
19        value="invoice"
20        label="Invoice"
21        description="Send a net-30 invoice to billing."
22        leading={<IconBuildingSkyscraper stroke={1.75} />}
23      />
24    </RadioGroup>
25  );
26}

 1import { IconShieldLock } from "@tabler/icons-react";
 2import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 3
 4export function RadioGroupError() {
 5  return (
 6    <RadioGroup
 7      label="Security policy"
 8      error="Choose a policy before saving this workspace."
 9      variant="command"
10    >
11      <RadioOption
12        value="standard"
13        label="Standard"
14        description="Balanced defaults for most teams."
15        leading={<IconShieldLock stroke={1.75} />}
16      />
17      <RadioOption
18        value="strict"
19        label="Strict"
20        description="Require 2FA, SSO, and token approvals."
21        leading={<IconShieldLock stroke={1.75} />}
22      />
23    </RadioGroup>
24  );
25}

 1import { IconDeviceLaptop, IconShieldLock } from "@tabler/icons-react";
 2import { RadioGroup, RadioOption } from "@/components/wensity/radio-group";
 3
 4export function RadioGroupDisabled() {
 5  return (
 6    <RadioGroup defaultValue="desktop" variant="command">
 7      <RadioOption
 8        value="desktop"
 9        label="Desktop"
10        description="Sync settings on this device."
11        leading={<IconDeviceLaptop stroke={1.75} />}
12      />
13      <RadioOption
14        value="managed"
15        label="Managed device"
16        description="Controlled by your organization."
17        disabled
18        leading={<IconShieldLock stroke={1.75} />}
19      />
20    </RadioGroup>
21  );
22}