Label

New

A standalone form label component using DaisyUI's fieldset-legend class. Supports required indicators, disabled states, and size variants — designed to pair with any form control without requiring a full fieldset wrapper.

API Reference

Attribute	Description	Type	Default
`for`	Associates the label with a form control via its `id`	string	`""`
`size`	Text size variant	string	`md`
`required`	Shows a red asterisk `*` after the label text	boolean	`False`
`disabled`	Reduces opacity to indicate the associated control is disabled	boolean	`False`

size

xs sm md lg

Association: always use the for prop to associate the label with its control's id. This enables click-to-focus and ensures screen readers announce the label when the control is focused.

Required indicator: the * asterisk is supplemental. Also set required on the associated input so that validation and screen reader announcements are correct.

Disabled state: visual opacity is a helpful hint but the label element itself is not interactive — ensure the associated input carries the disabled attribute.

Examples

Usage


<c-label for="email">Email address</c-label>
<input id="email" type="email" class="input" />

Basic Label

Email address

<c-label for="basic-input">Email address</c-label>
<input id="basic-input" type="email" class="input" />

Required Field

Full name *

<c-label for="required-input" required>Full name</c-label>
<input id="required-input" type="text" class="input" required />

Disabled

Username

<c-label for="disabled-input" disabled>Username</c-label>
<input id="disabled-input" type="text" class="input" disabled />

Sizes

XS — Label text

SM — Label text

MD — Label text

LG — Label text

<c-label size="xs">XS label</c-label>
<c-label size="sm">SM label</c-label>
<c-label size="md">MD label</c-label>
<c-label size="lg">LG label</c-label>

Combined States

Company name *

<c-label for="combo-input" required disabled>Company name</c-label>
<input id="combo-input" type="text" class="input" required disabled />