Label

An accessible text label for form controls. The controls in this library are deliberately label-less — Checkbox, Switch, and Input render just the control, with no built-in text — so Label is the piece you pair with them. This keeps labelling explicit and lets you place and style the text however you need.

The important prop is for: set it to the control's id and the two become associated. That association does real work — clicking the label focuses or toggles the control, and screen readers announce the label when the control gains focus. Always pair a control with a Label (or give the control an aria-label) so it has an accessible name.

Usage

On its own, Label is just styled label text. It shows a pointer cursor and isn't text-selectable, so clicking or double-clicking it to toggle a control doesn't highlight the words.

BasicA standalone label.

<script setup lang="ts">
import { ref } from "vue";
import { Panel, PanelContent, Label, Switch } from "@dlbcodes/ui";

const prefs = ref<Record<string, boolean>>({
    "notif-email": true,
    "notif-push": false,
    "notif-sms": false,
});

const options = [
    {
        id: "notif-email",
        title: "Email notifications",
        desc: "Get updates in your inbox.",
    },
    {
        id: "notif-push",
        title: "Push notifications",
        desc: "Alerts on your devices.",
    },
    {
        id: "notif-sms",
        title: "SMS notifications",
        desc: "Text messages for urgent items.",
    },
];
</script>

<template>
    <div class="w-full max-w-sm">
        <Panel>
            <PanelContent class="flex flex-col gap-1 p-2">
                <div
                    v-for="opt in options"
                    :key="opt.id"
                    class="flex items-center justify-between gap-4 rounded-xl px-3 py-2.5"
                >
                    <div class="min-w-0">
                        <Label :for="opt.id" class="block">
                            {{ opt.title }}
                        </Label>
                        <div class="text-xs text-muted-foreground">
                            {{ opt.desc }}
                        </div>
                    </div>
                    <Switch :id="opt.id" v-model="prefs[opt.id]" />
                </div>
            </PanelContent>
        </Panel>
    </div>
</template>

With a checkbox

Give the control an id and the label a matching for. Now clicking the label text toggles the checkbox — a larger, easier click target, and the correct accessible association.

With CheckboxClicking the label toggles the checkbox.

<script setup lang="ts">
import { ref } from "vue";
import { Label, Checkbox } from "@dlbcodes/ui";

const checked = ref(false);
</script>

<template>
    <div class="flex items-center gap-2">
        <Checkbox id="terms" v-model="checked" />
        <Label for="terms">Accept terms and conditions</Label>
    </div>
</template>

With a switch

The same for/id pairing works with any control.

With SwitchClicking the label toggles the switch.

<script setup lang="ts">
import { ref } from "vue";
import { Label, Switch } from "@dlbcodes/ui";

const enabled = ref(false);
</script>

<template>
    <div class="flex items-center gap-2">
        <Switch id="notifications" v-model="enabled" />
        <Label for="notifications">Enable notifications</Label>
    </div>
</template>

Pass your own id

Checkbox, Switch and Input generate an id for themselves when you don't pass one, but you can't point a Label at an id you don't know. Set the id on the control yourself and use the same value in the label's for.

Appearance

The label text uses the theme's --foreground color, so it follows your theme, including dark mode. See Theming.

Props

Prop	Type	Default	Description
for	string	—	Associates the label with a control by its id. Enables click-to-focus and the accessible name.
class	string	—	Classes merged onto the element.

Accessibility

• Label renders a native <label>, so the for/id association is real HTML labelling — no ARIA needed.
• Setting for to the control's id gives the control its accessible name and makes the label a click target for it. This is the recommended way to label a control.
• When you use a control without a visible label, give the control an aria-label instead so it still has an accessible name.

TIP

Inside a Field, prefer FieldLabel — it wires the for to the field's control automatically, so you don't manage ids by hand.