Label

A Tailwind CSS label component for accessible form fields.

<label class="label">Email</label>

With input

Connect a label to an input using matching for and id attributes. Clicking the label focuses the input, and screen readers announce it correctly. Use a Field wrapper for consistent spacing.

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="email">Email</label>
    <input
      class="input"
      id="email"
      type="email"
      placeholder="[email protected]"
      name="email"
    />
  </div>
</div>

With checkbox

Place the label next to a checkbox or switch for inline toggle fields.

<div class="field field-horizontal">
  <input
    type="checkbox"
    class="checkbox"
    id="accept-terms-and-conditions"
    name="accept-terms-and-conditions"
  />
  <label class="label" for="accept-terms-and-conditions">
    Accept terms and conditions
  </label>
</div>

How it works

The label component is a CSS-only utility class applied to a <label> element.

Structure

Use the .label class on a <label> element. The for attribute connects the label to a form element by matching its id. Clicking the label will focus or toggle the linked element:

<label class="label" for="name">Name</label>
<input class="input" id="name" type="text" />

The for value must match the id of the target element exactly. This also allows screen readers to announce the label when the input is focused.

Class reference