8.0k New

Label

Previous Next

Renders an accessible label associated with controls.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<div class="flex gap-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

Installation 

pnpm dlx shadcn-svelte@latest add label

Usage 

<script lang="ts">
  import { Label } from "$lib/components/ui/label/index.js";
</script>
<Label for="email">Your email address</Label>

Label in Field

For form fields, use the Field component which includes built-in Field.Label, Field.Description, and Field.Error components.

<Field.Field>
  <Field.Label for="email">Your email address</Field.Label>
  <Input id="email" />
</Field.Field>
Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import * as Select from "$lib/components/ui/select/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
 
  const months = [
    { 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: "2024", value: "2024" },
    { label: "2025", value: "2025" },
    { label: "2026", value: "2026" },
    { label: "2027", value: "2027" },
    { label: "2028", value: "2028" },
    { label: "2029", value: "2029" }
  ];
 
  let month = $state("");
  let year = $state("");
</script>
 
<div class="w-full max-w-md">
  <form>
    <Field.Group>
      <Field.Set>
        <Field.Legend>Payment Method</Field.Legend>
        <Field.Description
          >All transactions are secure and encrypted</Field.Description
        >
        <Field.Group>
          <Field.Field>
            <Field.Label for="checkout-7j9-card-name-43j"
              >Name on Card</Field.Label
            >
            <Input
              id="checkout-7j9-card-name-43j"
              placeholder="Evil Rabbit"
              required
            />
          </Field.Field>
          <Field.Field>
            <Field.Label for="checkout-7j9-card-number-uw1"
              >Card Number</Field.Label
            >
            <Input
              id="checkout-7j9-card-number-uw1"
              placeholder="1234 5678 9012 3456"
              required
            />
            <Field.Description
              >Enter your 16-digit card number</Field.Description
            >
          </Field.Field>
          <div class="grid grid-cols-3 gap-4">
            <Field.Field>
              <Field.Label for="checkout-exp-month-ts6">Month</Field.Label>
              <Select.Root type="single" items={months} bind:value={month}>
                <Select.Trigger id="checkout-exp-month-ts6">
                  <Select.Value placeholder="MM" />
                </Select.Trigger>
                <Select.Content>
                  <Select.Group>
                    {#each months as item (item.value)}
                      <Select.Item value={item.value} label={item.label}>
                        {item.label}
                      </Select.Item>
                    {/each}
                  </Select.Group>
                </Select.Content>
              </Select.Root>
            </Field.Field>
            <Field.Field>
              <Field.Label for="checkout-7j9-exp-year-f59">Year</Field.Label>
              <Select.Root type="single" items={years} bind:value={year}>
                <Select.Trigger id="checkout-7j9-exp-year-f59">
                  <Select.Value placeholder="YYYY" />
                </Select.Trigger>
                <Select.Content>
                  <Select.Group>
                    {#each years as item (item.value)}
                      <Select.Item value={item.value} label={item.label}>
                        {item.label}
                      </Select.Item>
                    {/each}
                  </Select.Group>
                </Select.Content>
              </Select.Root>
            </Field.Field>
            <Field.Field>
              <Field.Label for="checkout-7j9-cvv">CVV</Field.Label>
              <Input id="checkout-7j9-cvv" placeholder="123" required />
            </Field.Field>
          </div>
        </Field.Group>
      </Field.Set>
      <Field.Separator />
      <Field.Set>
        <Field.Legend>Billing Address</Field.Legend>
        <Field.Description>
          The billing address associated with your payment method
        </Field.Description>
        <Field.Group>
          <Field.Field orientation="horizontal">
            <Checkbox id="checkout-7j9-same-as-shipping-wgm" checked={true} />
            <Field.Label
              for="checkout-7j9-same-as-shipping-wgm"
              class="font-normal"
            >
              Same as shipping address
            </Field.Label>
          </Field.Field>
        </Field.Group>
      </Field.Set>
      <Field.Set>
        <Field.Group>
          <Field.Field>
            <Field.Label for="checkout-7j9-optional-comments"
              >Comments</Field.Label
            >
            <Textarea
              id="checkout-7j9-optional-comments"
              placeholder="Add any additional comments"
              class="resize-none"
            />
          </Field.Field>
        </Field.Group>
      </Field.Set>
      <Field.Field orientation="horizontal">
        <Button type="submit">Submit</Button>
        <Button variant="outline" type="button">Cancel</Button>
      </Field.Field>
    </Field.Group>
  </form>
</div>