Label

Local guide ↗ import { Label } from "bits-ui"

Native input

for points to the native input id, so the text names and activates the field

Account email

Notifications will be sent to alex@northstar.dev.

<script lang="ts">
	import { Label } from 'bits-ui';

	let email = $state('alex@northstar.dev');
</script>

<div class="mx-auto grid max-w-md gap-2">
	<Label.Root for="account-email" class="text-sm font-medium text-ink-200">
		Account email
	</Label.Root>
	<input
		id="account-email"
		type="email"
		bind:value={email}
		class="input w-full"
		placeholder="you@example.com"
	/>
	<p class="text-xs text-ink-400">
		Notifications will be sent to <span class="font-medium text-ink-200">{email || 'the address above'}</span>.
	</p>
</div>

Bits UI control

for/id activation and aria-labelledby give the custom checkbox one shared visible name

Weekly engineering digest

A concise summary of deployments, incidents and open reviews.

Digest is disabled.

<script lang="ts">
	import { Checkbox, Label } from 'bits-ui';
	import { Check } from '@lucide/svelte';

	let checked = $state(false);
</script>

<div class="mx-auto max-w-md">
	<div class="flex items-start gap-3 rounded-xl border border-ink-800 bg-ink-900 p-4">
		<Checkbox.Root
			id="weekly-digest"
			aria-labelledby="weekly-digest-label"
			bind:checked
			name="weekly-digest"
			class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded border border-ink-700 bg-ink-950 text-white outline-none transition data-[state=checked]:border-brand-500 data-[state=checked]:bg-brand-600 focus-visible:ring-2 focus-visible:ring-brand-400"
		>
			{#snippet children({ checked: isChecked })}
				{#if isChecked === true}<Check class="size-3.5" />{/if}
			{/snippet}
		</Checkbox.Root>
		<div class="grid gap-1">
			<Label.Root id="weekly-digest-label" for="weekly-digest" class="cursor-pointer text-sm font-medium text-ink-50">
				Weekly engineering digest
			</Label.Root>
			<p class="text-xs leading-5 text-ink-400">A concise summary of deployments, incidents and open reviews.</p>
		</div>
	</div>
	<p class="mt-3 text-center text-xs text-ink-400" aria-live="polite">
		Digest is {checked ? 'enabled' : 'disabled'}.
	</p>
</div>

Label.Root is an enhanced label intended for any input. Association is still explicit: pair for with the control’s id; for a non-native Bits UI control, also use the label id with aria-labelledby when the control’s API calls for an accessible name.

Unlike a bare label used ad hoc around a custom control, the primitive supports Bits UI child delegation and a bindable element ref, and exposes data-label-root as a stable styling hook. Those integrations do not replace the accessible association—the matching ids are what make clicking the visible label activate its control.