---
type: doc
title: Label
description: Renders an accessible label associated with a control.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/label/label-demo.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
---

<div class="flex gap-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/label
```

## Usage

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

```astro
<Label for="email">Your email address</Label>
```

Match `for` on `Label` with the control `id`, or nest the control inside the
label.

## Label in Field

For form fields with a description or error, use [Field](/astro/components/field/)
and its `FieldLabel`, `FieldDescription` and `FieldError`.

```astro title="src/components/examples/field/field-demo.astro"
---
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

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" },
]
---

<div class="w-full max-w-md">
  <form>
    <FieldGroup>
      <FieldSet>
        <FieldLegend>Payment Method</FieldLegend>
        <FieldDescription>
          All transactions are secure and encrypted
        </FieldDescription>
        <FieldGroup>
          <Field>
            <FieldLabel for="checkout-7j9-card-name-43j">
              Name on Card
            </FieldLabel>
            <Input
              id="checkout-7j9-card-name-43j"
              placeholder="Evil Rabbit"
              required
            />
          </Field>
          <Field>
            <FieldLabel for="checkout-7j9-card-number-uw1">
              Card Number
            </FieldLabel>
            <Input
              id="checkout-7j9-card-number-uw1"
              placeholder="1234 5678 9012 3456"
              required
            />
            <FieldDescription>Enter your 16-digit card number</FieldDescription>
          </Field>
          <div class="grid grid-cols-3 gap-4">
            <Field>
              <FieldLabel for="checkout-exp-month-ts6">Month</FieldLabel>
              <Select placeholder={months[0].label}>
                <SelectTrigger id="checkout-exp-month-ts6" class="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    {months.map((item) => (
                      <SelectItem value={item.value ?? ""}>
                        {item.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel for="checkout-7j9-exp-year-f59">Year</FieldLabel>
              <Select placeholder={years[0].label}>
                <SelectTrigger id="checkout-7j9-exp-year-f59" class="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    {years.map((item) => (
                      <SelectItem value={item.value ?? ""}>
                        {item.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel for="checkout-7j9-cvv">CVV</FieldLabel>
              <Input id="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="checkout-7j9-same-as-shipping-wgm" checked />
            <FieldLabel
              for="checkout-7j9-same-as-shipping-wgm"
              class="font-normal"
            >
              Same as shipping address
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSet as="div">
        <FieldGroup>
          <Field>
            <FieldLabel for="checkout-7j9-optional-comments">
              Comments
            </FieldLabel>
            <Textarea
              id="checkout-7j9-optional-comments"
              placeholder="Add any additional comments"
              class="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

```astro title="src/components/examples/label/label-rtl.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

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

const { dir, values: t } = translations.ar
---

<div class="flex gap-2" dir={dir}>
  <Checkbox id="terms-rtl" dir={dir} />
  <Label for="terms-rtl" dir={dir}>
    {t.label}
  </Label>
</div>
```

## API Reference

Source: [`src/components/ui/label`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/label)

`Label` renders a native `label` with `data-slot="label"` and passes all other
attributes through.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/label-examples @fulldev/field-examples
```