@neynar/ui 0.4.0 → 1.0.0

package/src/components/ui/stories/label.stories.tsx

@@ -1,293 +1,611 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label } from "../label";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InfoIcon } from "lucide-react";
+
 import { Input } from "../input";
+import { Label } from "../label";
 import { Checkbox } from "../checkbox";
 import { RadioGroup, RadioGroupItem } from "../radio-group";
 import { Switch } from "../switch";
 import { Textarea } from "../textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../select";
-
-const meta = {
-  title: "Form & Input/Label",
+
+const meta: Meta<typeof Label> = {
+  title: "Components/Form & Field/Label",
   component: Label,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A label component that provides accessible text labels for form controls. Built on Radix UI Label with automatic association to form elements.",
-      },
-    },
   },
   argTypes: {
     htmlFor: {
-      control: { type: "text" },
-      description: "The id of the form element this label is for",
+      control: "text",
+      description: "ID of the form element this label is associated with",
     },
-    children: {
-      control: { type: "text" },
-      description: "The label text content",
+    className: {
+      control: "text",
+      description: "Additional CSS classes",
     },
   },
-} satisfies Meta<typeof Label>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Label>;
 
 /**
- * Interactive playground for testing Label component with all available props
- * This story allows designers and developers to experiment with different configurations
+ * API Settings Form - A realistic scenario showing labels in context
+ * of a comprehensive settings form in the Neynar Dashboard.
  */
-export const Interactive: Story = {
-  args: {
-    children: "Email address",
-    htmlFor: "interactive-input",
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  argTypes: {
-    children: {
-      control: { type: "text" },
-      description: "The label text or content",
-    },
-    htmlFor: {
-      control: { type: "text" },
-      description: "The id of the form element this label is for",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes",
-    },
+  render: () => {
+    function APISettingsForm() {
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          {/* Header */}
+          <div>
+            <h2 className="text-lg font-semibold">API Settings</h2>
+            <p className="text-muted-foreground text-sm">
+              Configure your API access and notification preferences.
+            </p>
+          </div>
+
+          {/* API Configuration */}
+          <div className="border-border bg-card rounded-lg border p-4">
+            <h3 className="mb-4 font-medium">API Configuration</h3>
+            <div className="space-y-4">
+              {/* Simple label with input */}
+              <div className="space-y-2">
+                <Label htmlFor="api-name">API Key Name</Label>
+                <Input
+                  id="api-name"
+                  placeholder="e.g., Production Key"
+                  defaultValue="Production API"
+                />
+              </div>
+
+              {/* Label with required indicator */}
+              <div className="space-y-2">
+                <Label htmlFor="api-endpoint">
+                  API Endpoint
+                  <span className="text-destructive ml-1">*</span>
+                </Label>
+                <Input
+                  id="api-endpoint"
+                  placeholder="https://api.neynar.com/v2"
+                  defaultValue="https://api.neynar.com/v2"
+                  required
+                />
+              </div>
+
+              {/* Label with helper icon */}
+              <div className="space-y-2">
+                <Label htmlFor="rate-limit">
+                  Rate Limit (requests/min)
+                  <InfoIcon className="text-muted-foreground ml-1 size-3.5" />
+                </Label>
+                <Input
+                  id="rate-limit"
+                  type="number"
+                  placeholder="100"
+                  defaultValue="100"
+                />
+                <p className="text-muted-foreground text-sm">
+                  Maximum number of requests per minute
+                </p>
+              </div>
+
+              {/* Label with textarea */}
+              <div className="space-y-2">
+                <Label htmlFor="api-description">Description</Label>
+                <Textarea
+                  id="api-description"
+                  placeholder="Describe the purpose of this API key..."
+                  rows={3}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Permissions */}
+          <div className="border-border bg-card rounded-lg border p-4">
+            <h3 className="mb-4 font-medium">Permissions</h3>
+            <div className="space-y-4">
+              {/* Label with checkbox group */}
+              <div className="space-y-3">
+                <Label>API Scopes</Label>
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="scope-read" defaultChecked />
+                    <Label
+                      htmlFor="scope-read"
+                      className="font-normal cursor-pointer"
+                    >
+                      Read access to casts and users
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="scope-write" defaultChecked />
+                    <Label
+                      htmlFor="scope-write"
+                      className="font-normal cursor-pointer"
+                    >
+                      Write access to publish casts
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="scope-webhooks" />
+                    <Label
+                      htmlFor="scope-webhooks"
+                      className="font-normal cursor-pointer"
+                    >
+                      Manage webhooks
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="scope-analytics" disabled />
+                    <Label
+                      htmlFor="scope-analytics"
+                      className="font-normal cursor-not-allowed"
+                    >
+                      Analytics access (Premium only)
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {/* Label with radio group */}
+              <div className="space-y-3">
+                <Label>Environment</Label>
+                <RadioGroup defaultValue="production">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="production" id="env-prod" />
+                    <Label
+                      htmlFor="env-prod"
+                      className="font-normal cursor-pointer"
+                    >
+                      Production
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="staging" id="env-staging" />
+                    <Label
+                      htmlFor="env-staging"
+                      className="font-normal cursor-pointer"
+                    >
+                      Staging
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="development" id="env-dev" />
+                    <Label
+                      htmlFor="env-dev"
+                      className="font-normal cursor-pointer"
+                    >
+                      Development
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
+            </div>
+          </div>
+
+          {/* Notification Settings */}
+          <div className="border-border bg-card rounded-lg border p-4">
+            <h3 className="mb-4 font-medium">Notification Settings</h3>
+            <div className="space-y-4">
+              {/* Label with switch */}
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="email-notifications">
+                    Email Notifications
+                  </Label>
+                  <p className="text-muted-foreground text-sm">
+                    Receive alerts when API limits are reached
+                  </p>
+                </div>
+                <Switch id="email-notifications" defaultChecked />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="webhook-failures">
+                    Webhook Failure Alerts
+                  </Label>
+                  <p className="text-muted-foreground text-sm">
+                    Get notified when webhooks fail to deliver
+                  </p>
+                </div>
+                <Switch id="webhook-failures" />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="security-alerts" className="text-destructive">
+                    Security Alerts
+                    <span className="ml-1">*</span>
+                  </Label>
+                  <p className="text-muted-foreground text-sm">
+                    Critical security notifications (cannot be disabled)
+                  </p>
+                </div>
+                <Switch id="security-alerts" defaultChecked disabled />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return <APISettingsForm />;
   },
-  render: (args) => (
-    <div className="space-y-2">
-      <Label {...args} />
-      <Input id="interactive-input" placeholder="Type something..." />
-    </div>
-  ),
 };
 
 /**
- * Comprehensive showcase of Label component variants and styling options
- * Demonstrates different visual styles, states, and use cases for design reference
+ * Complete design system reference showing all label patterns, states, and use cases.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="space-y-8">
-      {/* Basic label styles */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Label Styles</h3>
-        <div className="grid gap-4">
-          <Label>Default Label</Label>
-          <Label className="text-primary">Primary Label</Label>
-          <Label className="text-destructive">Error Label</Label>
-          <Label className="text-muted-foreground">Muted Label</Label>
-          <Label className="cursor-not-allowed opacity-50">
-            Disabled Label
-          </Label>
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Basic Label Usage */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Usage</h3>
+          <p className="text-muted-foreground text-sm">
+            Standard label patterns with different form controls.
+          </p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="basic-text">Text Input</Label>
+            <Input id="basic-text" placeholder="Enter text" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="basic-email">Email Input</Label>
+            <Input id="basic-email" type="email" placeholder="your@email.com" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="basic-textarea">Textarea</Label>
+            <Textarea id="basic-textarea" placeholder="Enter longer text..." />
+          </div>
         </div>
-      </div>
-
-      {/* Size variations */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Size Variants</h3>
-        <div className="grid gap-4">
-          <Label className="text-xs">Extra Small (xs)</Label>
-          <Label className="text-sm">Small (sm)</Label>
-          <Label>Default Size</Label>
-          <Label className="text-lg">Large (lg)</Label>
-          <Label className="text-xl">Extra Large (xl)</Label>
+      </section>
+
+      {/* Label States */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Label States</h3>
+          <p className="text-muted-foreground text-sm">
+            Different states and visual treatments for labels.
+          </p>
         </div>
-      </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          {/* Default */}
+          <div className="space-y-2">
+            <Label htmlFor="state-default">Default Label</Label>
+            <Input id="state-default" placeholder="Normal state" />
+          </div>
 
-      {/* Form control associations */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Form Control Types</h3>
-        <div className="space-y-6">
-          {/* Text input */}
+          {/* Required */}
           <div className="space-y-2">
-            <Label htmlFor="variant-input">Text Input</Label>
-            <Input id="variant-input" placeholder="Enter text" />
+            <Label htmlFor="state-required">
+              Required Field
+              <span className="text-destructive ml-1">*</span>
+            </Label>
+            <Input id="state-required" placeholder="Required input" required />
           </div>
 
-          {/* Checkbox */}
-          <div className="flex items-center space-x-2">
-            <Checkbox id="variant-checkbox" />
-            <Label htmlFor="variant-checkbox" className="text-sm font-normal">
-              Checkbox Label
+          {/* Disabled */}
+          <div className="space-y-2">
+            <Label htmlFor="state-disabled" className="opacity-50">
+              Disabled Field
             </Label>
+            <Input id="state-disabled" placeholder="Disabled input" disabled />
           </div>
 
-          {/* Switch */}
-          <div className="flex items-center space-x-2">
-            <Switch id="variant-switch" />
-            <Label htmlFor="variant-switch">Switch Label</Label>
+          {/* With Helper Icon */}
+          <div className="space-y-2">
+            <Label htmlFor="state-icon">
+              With Helper Icon
+              <InfoIcon className="text-muted-foreground ml-1 size-3.5" />
+            </Label>
+            <Input id="state-icon" placeholder="With info icon" />
           </div>
 
-          {/* Radio Group */}
+          {/* With Description */}
           <div className="space-y-2">
-            <Label>Radio Group</Label>
-            <RadioGroup defaultValue="option1">
+            <Label htmlFor="state-desc">With Description</Label>
+            <Input id="state-desc" placeholder="Enter value" />
+            <p className="text-muted-foreground text-sm">
+              Helper text providing additional context
+            </p>
+          </div>
+
+          {/* Error State */}
+          <div className="space-y-2">
+            <Label htmlFor="state-error" className="text-destructive">
+              Error State
+            </Label>
+            <Input
+              id="state-error"
+              placeholder="Invalid input"
+              aria-invalid="true"
+            />
+            <p className="text-destructive text-sm">This field is required</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Checkbox and Radio Labels */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Checkbox & Radio Labels</h3>
+          <p className="text-muted-foreground text-sm">
+            Labels for checkbox and radio button controls.
+          </p>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2">
+          {/* Checkboxes */}
+          <div className="space-y-3">
+            <Label className="font-medium">Checkbox Group</Label>
+            <div className="space-y-2">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="cb-1" defaultChecked />
+                <Label htmlFor="cb-1" className="font-normal cursor-pointer">
+                  Option 1 (selected)
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="cb-2" />
+                <Label htmlFor="cb-2" className="font-normal cursor-pointer">
+                  Option 2
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="cb-3" disabled />
+                <Label
+                  htmlFor="cb-3"
+                  className="font-normal cursor-not-allowed"
+                >
+                  Option 3 (disabled)
+                </Label>
+              </div>
+            </div>
+          </div>
+
+          {/* Radio Buttons */}
+          <div className="space-y-3">
+            <Label className="font-medium">Radio Group</Label>
+            <RadioGroup defaultValue="radio-1">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="radio-1" id="radio-1" />
+                <Label htmlFor="radio-1" className="font-normal cursor-pointer">
+                  Radio 1 (selected)
+                </Label>
+              </div>
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="option1" id="radio1" />
-                <Label htmlFor="radio1">Option 1</Label>
+                <RadioGroupItem value="radio-2" id="radio-2" />
+                <Label htmlFor="radio-2" className="font-normal cursor-pointer">
+                  Radio 2
+                </Label>
               </div>
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="option2" id="radio2" />
-                <Label htmlFor="radio2">Option 2</Label>
+                <RadioGroupItem value="radio-3" id="radio-3" disabled />
+                <Label
+                  htmlFor="radio-3"
+                  className="font-normal cursor-not-allowed"
+                >
+                  Radio 3 (disabled)
+                </Label>
               </div>
             </RadioGroup>
           </div>
         </div>
-      </div>
+      </section>
 
-      {/* Required and optional indicators */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Field Indicators</h3>
-        <div className="space-y-4">
-          <Label htmlFor="required-field">
-            Required Field <span className="text-destructive">*</span>
-          </Label>
-          <Label htmlFor="optional-field" className="text-muted-foreground">
-            Optional Field
-          </Label>
+      {/* Switch Labels */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Switch Labels</h3>
+          <p className="text-muted-foreground text-sm">
+            Labels for toggle switches with descriptions.
+          </p>
         </div>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Real-world example showing Label component in a complete form context
- * Demonstrates practical usage patterns for business and design teams
- */
-export const InContext: Story = {
-  render: () => (
-    <div className="mx-auto max-w-md space-y-8">
-      <div className="text-center">
-        <h2 className="text-2xl font-bold">Create Account</h2>
-        <p className="text-muted-foreground">Join us to get started</p>
-      </div>
-
-      <form className="space-y-6">
-        {/* Personal Information */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold">Personal Information</h3>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="switch-1">Enable notifications</Label>
+              <p className="text-muted-foreground text-sm">
+                Receive email notifications for updates
+              </p>
+            </div>
+            <Switch id="switch-1" defaultChecked />
+          </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="first-name">
-                First Name <span className="text-destructive">*</span>
-              </Label>
-              <Input id="first-name" placeholder="John" required />
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="switch-2">Dark mode</Label>
+              <p className="text-muted-foreground text-sm">
+                Switch to dark theme
+              </p>
             </div>
-            <div className="space-y-2">
-              <Label htmlFor="last-name">
-                Last Name <span className="text-destructive">*</span>
+            <Switch id="switch-2" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="switch-3" className="opacity-50">
+                Premium feature
               </Label>
-              <Input id="last-name" placeholder="Doe" required />
+              <p className="text-muted-foreground text-sm opacity-50">
+                Available with premium subscription
+              </p>
             </div>
+            <Switch id="switch-3" disabled />
           </div>
+        </div>
+      </section>
 
-          <div className="space-y-2">
-            <Label htmlFor="email">
-              Email Address <span className="text-destructive">*</span>
-            </Label>
-            <Input
-              id="email"
-              type="email"
-              placeholder="john.doe@example.com"
-              required
-            />
-            <p className="text-sm text-muted-foreground">
-              We&apos;ll never share your email with anyone else.
-            </p>
+      {/* Label Alignment */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Label Alignment</h3>
+          <p className="text-muted-foreground text-sm">
+            Different alignment patterns for form layouts.
+          </p>
+        </div>
+        <div className="space-y-6">
+          {/* Vertical (default) */}
+          <div>
+            <h4 className="text-muted-foreground mb-3 text-sm font-medium">
+              Vertical Layout (Default)
+            </h4>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="align-v1">First Name</Label>
+                <Input id="align-v1" placeholder="John" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="align-v2">Last Name</Label>
+                <Input id="align-v2" placeholder="Doe" />
+              </div>
+            </div>
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="password">
-              Password <span className="text-destructive">*</span>
-            </Label>
-            <Input id="password" type="password" required />
-            <p className="text-sm text-muted-foreground">
-              Must be at least 8 characters with one number and one special
-              character.
-            </p>
+          {/* Horizontal */}
+          <div>
+            <h4 className="text-muted-foreground mb-3 text-sm font-medium">
+              Horizontal Layout
+            </h4>
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="align-h1" className="text-right">
+                  Username
+                </Label>
+                <Input
+                  id="align-h1"
+                  className="col-span-2"
+                  placeholder="johndoe"
+                />
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="align-h2" className="text-right">
+                  Email
+                </Label>
+                <Input
+                  id="align-h2"
+                  className="col-span-2"
+                  type="email"
+                  placeholder="john@example.com"
+                />
+              </div>
+            </div>
           </div>
         </div>
+      </section>
 
-        {/* Preferences */}
+      {/* Complex Labels */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Complex Labels</h3>
+          <p className="text-muted-foreground text-sm">
+            Labels with rich content and multiple elements.
+          </p>
+        </div>
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold">Preferences</h3>
+          {/* Label with badge */}
+          <div className="space-y-2">
+            <Label htmlFor="complex-1" className="flex items-center gap-2">
+              API Key
+              <span className="bg-primary/10 text-primary rounded px-1.5 py-0.5 text-xs font-medium">
+                Required
+              </span>
+            </Label>
+            <Input id="complex-1" placeholder="Enter your API key" />
+          </div>
 
+          {/* Label with multiple indicators */}
           <div className="space-y-2">
-            <Label htmlFor="country">Country</Label>
-            <Select>
-              <SelectTrigger id="country">
-                <SelectValue placeholder="Select your country" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="us">United States</SelectItem>
-                <SelectItem value="uk">United Kingdom</SelectItem>
-                <SelectItem value="ca">Canada</SelectItem>
-                <SelectItem value="au">Australia</SelectItem>
-              </SelectContent>
-            </Select>
+            <Label
+              htmlFor="complex-2"
+              className="flex items-center justify-between"
+            >
+              <span className="flex items-center gap-2">
+                Password
+                <span className="text-destructive">*</span>
+                <InfoIcon className="text-muted-foreground size-3.5" />
+              </span>
+              <span className="text-muted-foreground text-xs font-normal">
+                Min 8 characters
+              </span>
+            </Label>
+            <Input id="complex-2" type="password" placeholder="••••••••" />
           </div>
 
+          {/* Label with link */}
           <div className="space-y-2">
-            <Label htmlFor="bio">Bio (Optional)</Label>
-            <Textarea
-              id="bio"
-              placeholder="Tell us a bit about yourself..."
-              className="min-h-[100px]"
-            />
+            <Label htmlFor="complex-3">
+              Webhook URL
+              <a
+                href="#"
+                className="text-primary hover:underline ml-1 text-xs font-normal"
+                onClick={(e) => e.preventDefault()}
+              >
+                (Learn more)
+              </a>
+            </Label>
+            <Input id="complex-3" placeholder="https://example.com/webhook" />
           </div>
         </div>
+      </section>
 
-        {/* Agreements */}
+      {/* Accessibility */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Accessibility</h3>
+          <p className="text-muted-foreground text-sm">
+            Labels properly associate with form controls using htmlFor.
+          </p>
+        </div>
         <div className="space-y-4">
-          <div className="flex items-start space-x-2">
-            <Checkbox id="terms" required />
-            <Label htmlFor="terms" className="text-sm leading-relaxed">
-              I agree to the{" "}
-              <a href="#" className="text-primary underline hover:no-underline">
-                Terms of Service
-              </a>{" "}
-              and{" "}
-              <a href="#" className="text-primary underline hover:no-underline">
-                Privacy Policy
-              </a>
-              <span className="text-destructive ml-1">*</span>
+          <div className="space-y-2">
+            <Label htmlFor="a11y-1">
+              Clicking this label focuses the input below
             </Label>
+            <Input id="a11y-1" placeholder="Click the label to focus" />
           </div>
-
           <div className="flex items-center space-x-2">
-            <Checkbox id="newsletter" />
-            <Label htmlFor="newsletter" className="text-sm">
-              Subscribe to our newsletter for updates and tips
+            <Checkbox id="a11y-2" />
+            <Label htmlFor="a11y-2" className="font-normal cursor-pointer">
+              Clicking this text toggles the checkbox
             </Label>
           </div>
-
-          <div className="flex items-center space-x-2">
-            <Switch id="notifications" />
-            <Label htmlFor="notifications" className="text-sm">
-              Enable email notifications
+          <div className="flex items-center justify-between">
+            <Label htmlFor="a11y-3" className="cursor-pointer">
+              Clicking this text toggles the switch
             </Label>
+            <Switch id="a11y-3" />
           </div>
         </div>
+      </section>
+    </div>
+  ),
+};
 
-        <button
-          type="submit"
-          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-        >
-          Create Account
-        </button>
-      </form>
+/**
+ * Interactive playground for testing label props.
+ */
+export const Interactive: Story = {
+  args: {
+    children: "Label Text",
+    htmlFor: "example-input",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="example-input" placeholder="Enter text..." />
     </div>
   ),
 };