Label

Renders an accessible label associated with controls.

Accept terms and conditions

1
import { Checkbox } from "@/components/ui/pxl/checkbox";
2
import { Label } from "@/components/ui/pxl/label";
3

4
export default function LabelDemo() {
5
  return (
6
    <div className="flex gap-2 h-fit">
7
      <Checkbox id="terms" />
8
      <Label htmlFor="terms">Accept terms and conditions</Label>
9
    </div>
10
  );
11
}

Default

For form fields, use the Field component which includes built-in label, description, and error handling.

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/label

Copy and paste the following code into your project.

1
"use client";
2

3
import type { ComponentProps } from "react";
4

5
import { cn } from "@/lib/utils";
6

7
function Label({ className, ...props }: ComponentProps<"label">) {
8
  return (
9
    // biome-ignore lint/a11y/noLabelWithoutControl: standalone component
10
    <label
11
      data-slot="label"
12
      className={cn(
13
        "flex items-center gap-2 text-sm leading-none font-sans select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
14
        className,
15
      )}
16
      {...props}
17
    />
18
  );
19
}
20

21
export { Label };

Update the import paths to match your project setup.

Usage

import { Label } from "@/components/ui/pxl/label"

<Label htmlFor="email">Your email address</Label>

Label in Field

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>