Label

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Project name

Enable notifications

Sends alerts to all maintainers.

Prop reference

Auto-generated from the component source

Label

className

React.ComponentProps<typeof LabelPrimitive.Root>

Code

// owner: Sona
"use client";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";

export default function LabelExample() {
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <Label htmlFor="project-name">Project name</Label>
        <Input id="project-name" defaultValue="Atlas" />
      </div>
      <label className="flex items-center justify-between gap-4 text-sm">
        <div>
          <Label htmlFor="notifications" className="cursor-pointer">
            Enable notifications
          </Label>
          <p className="text-muted-foreground text-xs">
            Sends alerts to all maintainers.
          </p>
        </div>
        <Switch id="notifications" />
      </label>
    </div>
  );
}

Label

Component preview

On this page

Command Palette