Label
An accessible label element that associates descriptive text with form controls via the HTML for attribute. Pairs with inputs, checkboxes, switches, and other form elements to improve usability and screen reader support.
Default
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.Required Field
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.With Checkbox
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.With Switch
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.Custom Styling
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.Settings Form
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.