Label

Preview

import { Checkbox } from "@/registry/components/checkbox/react/checkbox";
import { Label } from "@/registry/components/label/react/label";


export function LabelDemo() {
    return (
        <Label htmlFor="label-demo">
            <Checkbox id="label-demo" />
            Accept terms and conditions
        </Label>
    );
}

Installation

You can add the dialog component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the dialog component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components input --framework react
npx make-sugarcube@latest components input --framework react
yarn make-sugarcube@latest components input --framework react
bunx --bun make-sugarcube@latest components input --framework react

What’s included

When you add the label component, you get:

  • label.tsx - The React component implementation
  • label.tokens.json - The CSS variables that map to your design tokens
  • @clsx - The clsx utility for conditional classes
"use client";


import * as LabelPrimitive from "@radix-ui/react-label";
import type * as React from "react";


import cn from "clsx";


function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
    return <LabelPrimitive.Root className={cn("label", className)} {...props} />;
}


export { Label };
{
  "label": {
    "gap": { "$value": "{space.2xs}" },
    "inline-gap": { "$value": "{space.3xs}" },
    "font": { "$value": "{font.sans}" },
    "size": { "$value": "{text.sm}" },
    "weight": { "$value": "{font.weight.medium}" },
    "color": { "$value": "{text.primary}" },
    "leading": { "$value": "{leading.tight}" }
  }
}

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::