Label

A basic Label associated with an Input using the For parameter. The For value must match the input's Id attribute. Clicking the label text focuses the linked input field, improving usability for mouse and touch users.

Nest a <span> with the text-destructive class inside the label to display a red asterisk indicating a required field. This is a common convention that visually signals mandatory fields without requiring additional ARIA attributes, since the input's Required parameter handles the semantic requirement.

A Label associated with a Checkbox in a horizontal layout. Setting For to match the checkbox's Id allows users to toggle the checkbox by clicking the label text. The peer-disabled CSS utility automatically mutes the label when the checkbox is disabled.

A Label associated with a Switch toggle. The For parameter links the label to the switch, so clicking the label text toggles the switch on or off. This increases the interactive target area, making the control easier to activate on both desktop and mobile.

Use the Class parameter to apply custom Tailwind CSS classes. This example uses text-base and font-bold to increase the label's font size and weight beyond the default text-sm font-medium styling. Any Tailwind utility can be applied for project-specific designs.

A real-world composition showing multiple Label components paired with Switch toggles in a settings panel. Each label-switch pair is laid out horizontally with justify-between, and a muted description below the label provides context for each setting.