Label

A form label.

Pass for to point at a control's id, or wrap the control to associate it implicitly — wrapping a Switch or Checkbox also makes the whole row a hit target.

Forms

<script lang="ts">
	import { Label } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Everything not listed above is spread onto the underlying element (HTMLLabelAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Label for="{uid}-name">Snapshot name</Label>
<Input id="{uid}-name" value="weekly-2026-09" />

Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider

---

← All components · Getting started · Theming · source