Label
A caption for a form control. Associate it with an input via the for prop so clicking the label focuses the control and assistive tech reads them together. It automatically dims and shows a not-allowed cursor when its peer control is disabled.
With a field
for matched to the control's id is what makes the label part of the control: clicking it focuses the field, and a screen reader announces the two together.
<div class="flex w-64 flex-col gap-2">
<Label for="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>Disabled control
Add peer to the control and the label dims with it, so a disabled field never keeps a label that reads as live. The label comes after the control in the markup — peer only reaches forward — and the row is reversed visually.
<div class="flex w-64 flex-col-reverse gap-2">
<Input id="username" class="peer" placeholder="Disabled" disabled />
<Label for="username">Username</Label>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
children | import('svelte').Snippet | Label content rendered inside the element. | |
class | string | Additional Tailwind classes merged onto the label element. | |
for | string | ID of the form control this label describes (forwarded via |