Examples

Forms

Tailwind CSS form components for building accessible, styled forms.

<div class="w-full max-w-xs">
  <form class="field-group">
    <div class="field">
      <label class="label" for="full-name">Full name</label>
      <input
        class="input"
        id="full-name"
        type="text"
        placeholder="John Smith"
        name="full-name"
      />
    </div>
    <div class="field">
      <label class="label" for="email-address">Email address</label>
      <input
        class="input"
        id="email-address"
        type="email"
        placeholder="[email protected]"
        name="email-address"
      />
    </div>
    <div class="field">
      <label class="label" for="event-date">Event date</label>
      <input class="input" id="event-date" type="date" name="event-date" />
    </div>
    <div class="field">
      <label class="label" for="event-type">Event type</label>
      <select class="select" id="event-type" name="event-type">
        <option value="">Select event type</option>
        <option value="wedding">Wedding Reception</option>
        <option value="corporate">Corporate Event</option>
        <option value="birthday">Birthday Party</option>
      </select>
    </div>
    <div class="field">
      <label class="label" for="additional-details">Additional details</label>
      <textarea
        class="textarea"
        id="additional-details"
        name="additional-details"
        placeholder="Tell us about your event..."
      ></textarea>
    </div>
    <div class="field field-horizontal">
      <input
        type="checkbox"
        class="checkbox"
        id="email-me-news-and-special-offers"
        name="email-me-news-and-special-offers"
      />
      <label class="label" for="email-me-news-and-special-offers">
        Email me news and special offers
      </label>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>

Components

  • Input — Single-line text entry for text, email, password, and other types
  • Input Group — Decorate inputs with icons, text, or other addons
  • Textarea — Multi-line text input
  • Select — Native dropdown for choosing from a list of options
  • Field — Structured form field layout with labels, descriptions, and errors
  • Combobox — Searchable, keyboard-navigable dropdown with single and multi-select
  • Checkbox — Toggle options on and off, with card and list select variants
  • Radio Group — Select a single option from a group, with card and list select variants
  • Switch — Toggle settings on and off
  • Label — Accessible labels for form fields
  • Button — Actions and form submissions
  • Button Group — Group related buttons together

Accessibility

All form components support standard accessibility patterns:

  • Use Label with matching for and id attributes to connect labels to inputs
  • Use aria-invalid="true" for validation error states
  • Use aria-describedby to connect error messages to their fields
  • Use disabled to prevent interaction on any form element
  • Use peer on disabled toggles so labels dim automatically via peer-disabled