# Label

Renders an accessible label associated with controls.

Page: https://sui.draco.dev/docs/components/label

### Example: label-demo

```tsx
import { Checkbox } from "@workspace/ui/components/checkbox";
import { Label } from "@workspace/ui/components/label";
import { useId as usePreviewId } from "react";

export default function LabelDemo() {
  const previewId = usePreviewId();

  return (
    <div className="flex gap-2">
      <Checkbox id={`${previewId}-terms`} />
      <Label htmlFor={`${previewId}-terms`}>Accept terms and conditions</Label>
    </div>
  );
}
```

  For form fields, use the [Field](/docs/components/field) component which
  includes built-in label, description, and error handling.

## Installation

```bash
bunx --bun shadcn@latest add @sui/label
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

## Usage

```tsx
import { Label } from "@workspace/ui/components/label"
```

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

## Label in Field

For form fields, use the [Field](/docs/components/field) component which
includes built-in `FieldLabel`, `FieldDescription`, and `FieldError` components.

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

### Example: field-demo

```tsx
import { Button } from "@workspace/ui/components/button";
import { Checkbox } from "@workspace/ui/components/checkbox";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from "@workspace/ui/components/field";
import { Input } from "@workspace/ui/components/input";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@workspace/ui/components/select";
import { Textarea } from "@workspace/ui/components/textarea";
import { useId as usePreviewId } from "react";

const months = [
  { label: "MM", value: null },
  { label: "01", value: "01" },
  { label: "02", value: "02" },
  { label: "03", value: "03" },
  { label: "04", value: "04" },
  { label: "05", value: "05" },
  { label: "06", value: "06" },
  { label: "07", value: "07" },
  { label: "08", value: "08" },
  { label: "09", value: "09" },
  { label: "10", value: "10" },
  { label: "11", value: "11" },
  { label: "12", value: "12" },
];

const years = [
  { label: "YYYY", value: null },
  { label: "2024", value: "2024" },
  { label: "2025", value: "2025" },
  { label: "2026", value: "2026" },
  { label: "2027", value: "2027" },
  { label: "2028", value: "2028" },
  { label: "2029", value: "2029" },
];

export default function FieldDemo() {
  const previewId = usePreviewId();

  return (
    <div className="w-full max-w-md">
      <form>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Payment Method</FieldLegend>
            <FieldDescription>
              All transactions are secure and encrypted
            </FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor={`${previewId}-checkout-7j9-card-name-43j`}>
                  Name on Card
                </FieldLabel>
                <Input
                  id={`${previewId}-checkout-7j9-card-name-43j`}
                  placeholder="Evil Rabbit"
                  required
                />
              </Field>
              <Field>
                <FieldLabel
                  htmlFor={`${previewId}-checkout-7j9-card-number-uw1`}
                >
                  Card Number
                </FieldLabel>
                <Input
                  id={`${previewId}-checkout-7j9-card-number-uw1`}
                  placeholder="1234 5678 9012 3456"
                  required
                />
                <FieldDescription>
                  Enter your 16-digit card number
                </FieldDescription>
              </Field>
              <div className="grid grid-cols-3 gap-4">
                <Field>
                  <FieldLabel htmlFor={`${previewId}-checkout-exp-month-ts6`}>
                    Month
                  </FieldLabel>
                  <Select items={months}>
                    <SelectTrigger id={`${previewId}-checkout-exp-month-ts6`}>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        {months.map((item) => (
                          <SelectItem key={item.value} value={item.value}>
                            {item.label}
                          </SelectItem>
                        ))}
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel
                    htmlFor={`${previewId}-checkout-7j9-exp-year-f59`}
                  >
                    Year
                  </FieldLabel>
                  <Select items={years}>
                    <SelectTrigger
                      id={`${previewId}-checkout-7j9-exp-year-f59`}
                    >
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        {years.map((item) => (
                          <SelectItem key={item.value} value={item.value}>
                            {item.label}
                          </SelectItem>
                        ))}
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor={`${previewId}-checkout-7j9-cvv`}>
                    CVV
                  </FieldLabel>
                  <Input
                    id={`${previewId}-checkout-7j9-cvv`}
                    placeholder="123"
                    required
                  />
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <FieldSeparator />
          <FieldSet>
            <FieldLegend>Billing Address</FieldLegend>
            <FieldDescription>
              The billing address associated with your payment method
            </FieldDescription>
            <FieldGroup>
              <Field orientation="horizontal">
                <Checkbox
                  id={`${previewId}-checkout-7j9-same-as-shipping-wgm`}
                  defaultChecked
                />
                <FieldLabel
                  htmlFor={`${previewId}-checkout-7j9-same-as-shipping-wgm`}
                  className="font-normal"
                >
                  Same as shipping address
                </FieldLabel>
              </Field>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel
                  htmlFor={`${previewId}-checkout-7j9-optional-comments`}
                >
                  Comments
                </FieldLabel>
                <Textarea
                  id={`${previewId}-checkout-7j9-optional-comments`}
                  placeholder="Add any additional comments"
                  className="resize-none"
                />
              </Field>
            </FieldGroup>
          </FieldSet>
          <Field orientation="horizontal">
            <Button type="submit">Submit</Button>
            <Button variant="outline" type="button">
              Cancel
            </Button>
          </Field>
        </FieldGroup>
      </form>
    </div>
  );
}
```

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

### Example: label-rtl

```tsx
"use client";

import { Checkbox } from "@workspace/ui/components/checkbox";
import { Label } from "@workspace/ui/components/label";
import { useId as usePreviewId } from "react";
import { type Translations, useTranslation } from "./support";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Accept terms and conditions",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "قبول الشروط والأحكام",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "קבל תנאים והגבלות",
    },
  },
};

export function LabelRtl() {
  const previewId = usePreviewId();

  const { dir, t } = useTranslation(translations, "ar");

  return (
    <div className="flex gap-2" dir={dir}>
      <Checkbox id={`${previewId}-terms-rtl`} dir={dir} />
      <Label htmlFor={`${previewId}-terms-rtl`} dir={dir}>
        {t.label}
      </Label>
    </div>
  );
}

export default LabelRtl;
```

## API Reference

See the [Base UI Label](https://base-ui.com/react/components/label#api-reference) documentation for more information.

- [Documentation](https://base-ui.com/react/components/label)
- [API reference](https://base-ui.com/react/components/label#api-reference)