Tailwind CSS Forms

Use the form components together to build complete forms, like a login, a signup, or a settings page. Each field lays out a label, control, and description around a native form element, so values submit with the form.

<form class="field-group w-full max-w-sm">
  <fieldset class="field-set">
    <legend class="field-legend">Contact</legend>
    <p class="field-description">How we can reach you about your booking.</p>
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-name">Full name</label>
        <input class="input" id="forms-name" name="name" placeholder="John Smith" />
      </div>
      <div class="field">
        <label class="label" for="forms-email">Email address</label>
        <input class="input" id="forms-email" name="email" type="email" placeholder="[email protected]" />
        <p class="field-description">We only use this for the booking confirmation.</p>
      </div>
      <div class="field">
        <label class="label" for="forms-website">Website</label>
        <div class="input-group">
          <span class="input-group-addon"><span class="input-group-text">https://</span></span>
          <input class="input pl-0.5!" id="forms-website" name="website" placeholder="example.com" />
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-country-input">Country</label>
        <div class="input-group" id="forms-country-field">
          <input class="input" id="forms-country-input" placeholder="Select a country" />
          <span class="input-group-addon input-group-addon-end">
            <button class="btn btn-ghost btn-xs btn-icon" type="button" tabindex="-1" aria-label="Open list"><svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
          </span>
        </div>
      </div>
      <div class="combobox" data-sp-toggle="#forms-country-field">
        <div class="combobox-empty">No countries found.</div>
        <div class="combobox-list">
          <div class="combobox-item"><input type="radio" name="country" value="de" /> Germany</div>
          <div class="combobox-item"><input type="radio" name="country" value="se" /> Sweden</div>
          <div class="combobox-item"><input type="radio" name="country" value="uk" /> United Kingdom</div>
          <div class="combobox-item"><input type="radio" name="country" value="us" /> United States</div>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="field-separator"></div>
  <fieldset class="field-set">
    <legend class="field-legend">Event details</legend>
    <p class="field-description">What we are planning together.</p>
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-type">Event type</label>
        <select class="select" id="forms-type" name="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="forms-date">Event date</label>
        <input class="input" id="forms-date" name="date" type="date" />
      </div>
      <div class="field">
        <span class="field-title">Guests</span>
        <p class="field-description">
          Up to <span class="font-medium tabular-nums" data-sp-slider-value="forms-guests">50</span> guests.
        </p>
        <input type="range" class="slider mt-2" id="forms-guests" name="guests" min="0" max="200" step="10" value="50" style="--val: 25%" aria-label="Guests" />
      </div>
      <div class="field">
        <label class="label" for="forms-budget">Budget</label>
        <div class="input-group">
          <span class="input-group-addon"><span class="input-group-text">$</span></span>
          <input class="input" id="forms-budget" name="budget" placeholder="0.00" />
          <span class="input-group-addon input-group-addon-end"><span class="input-group-text">USD</span></span>
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-promo">Promo code</label>
        <div class="btn-group">
          <input class="input" id="forms-promo" name="promo" placeholder="SUMMER25" />
          <button class="btn btn-outline" type="button">Apply</button>
        </div>
      </div>
      <div class="field">
        <label class="label" for="forms-details">Additional details</label>
        <textarea class="textarea" id="forms-details" name="details" placeholder="Tell us about your event..."></textarea>
      </div>
    </div>
  </fieldset>
  <div class="field-separator"></div>
  <fieldset class="field-set">
    <legend class="field-legend">Preferences</legend>
    <p class="field-description">Fine-tune the event to your liking.</p>
    <div class="field-group">
      <fieldset class="field-set">
        <legend class="field-legend field-legend-label">Seating</legend>
        <div class="field-group gap-3">
          <div class="field field-horizontal">
            <input type="radio" class="radio" id="forms-seating-indoor" name="seating" value="indoor" checked />
            <label class="label font-normal" for="forms-seating-indoor">Indoor</label>
          </div>
          <div class="field field-horizontal">
            <input type="radio" class="radio" id="forms-seating-outdoor" name="seating" value="outdoor" />
            <label class="label font-normal" for="forms-seating-outdoor">Outdoor</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="field-set">
        <legend class="field-legend field-legend-label">Add-ons</legend>
        <div class="field-group gap-3">
          <div class="field field-horizontal">
            <input type="checkbox" class="checkbox" id="forms-addon-catering" name="addons" value="catering" checked />
            <label class="label font-normal" for="forms-addon-catering">Catering</label>
          </div>
          <div class="field field-horizontal">
            <input type="checkbox" class="checkbox" id="forms-addon-photo" name="addons" value="photography" />
            <label class="label font-normal" for="forms-addon-photo">Photography</label>
          </div>
        </div>
      </fieldset>
      <div class="field field-horizontal">
        <input type="checkbox" role="switch" class="switch" id="forms-offers" name="offers" />
        <label class="label" for="forms-offers">Email me news and special offers</label>
      </div>
    </div>
  </fieldset>
  <div class="field field-horizontal">
    <button class="btn btn-outline" type="reset">Reset</button>
    <button class="btn" type="submit">Submit</button>
  </div>
</form>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<form id="forms-rtl-demo" class="field-group w-full max-w-sm" dir="rtl">
  <fieldset class="field-set">
    <legend class="field-legend" data-i18n="paymentMethod">طريقة الدفع</legend>
    <p class="field-description" data-i18n="secureTransactions">جميع المعاملات آمنة ومشفرة</p>
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-rtl-card-name" data-i18n="nameOnCard">الاسم على البطاقة</label>
        <input class="input" id="forms-rtl-card-name" placeholder="Evil Rabbit" required />
      </div>
      <div class="field">
        <label class="label" for="forms-rtl-card-number" data-i18n="cardNumber">رقم البطاقة</label>
        <input class="input" id="forms-rtl-card-number" placeholder="1234 5678 9012 3456" required />
        <p class="field-description" data-i18n="cardNumberDescription">أدخل رقم البطاقة المكون من 16 رقمًا</p>
      </div>
      <div class="grid grid-cols-3 gap-4">
        <div class="field">
          <label class="label" for="forms-rtl-exp-month" data-i18n="month">الشهر</label>
          <select class="select" id="forms-rtl-exp-month">
            <option value="" data-i18n="monthPlaceholder">ش.ش</option>
            <option value="01" data-i18n="month01">٠١</option>
            <option value="02" data-i18n="month02">٠٢</option>
            <option value="03" data-i18n="month03">٠٣</option>
            <option value="04" data-i18n="month04">٠٤</option>
            <option value="05" data-i18n="month05">٠٥</option>
            <option value="06" data-i18n="month06">٠٦</option>
            <option value="07" data-i18n="month07">٠٧</option>
            <option value="08" data-i18n="month08">٠٨</option>
            <option value="09" data-i18n="month09">٠٩</option>
            <option value="10" data-i18n="month10">١٠</option>
            <option value="11" data-i18n="month11">١١</option>
            <option value="12" data-i18n="month12">١٢</option>
          </select>
        </div>
        <div class="field">
          <label class="label" for="forms-rtl-exp-year" data-i18n="year">السنة</label>
          <select class="select" id="forms-rtl-exp-year">
            <option value="">YYYY</option>
            <option>2024</option>
            <option>2025</option>
            <option>2026</option>
            <option>2027</option>
            <option>2028</option>
            <option>2029</option>
          </select>
        </div>
        <div class="field">
          <label class="label" for="forms-rtl-cvv" data-i18n="cvv">CVV</label>
          <input class="input" id="forms-rtl-cvv" placeholder="123" required />
        </div>
      </div>
    </div>
  </fieldset>
  <div class="field-separator"></div>
  <fieldset class="field-set">
    <legend class="field-legend" data-i18n="billingAddress">عنوان الفوترة</legend>
    <p class="field-description" data-i18n="billingAddressDescription">عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك</p>
    <div class="field-group">
      <div class="field field-horizontal">
        <input type="checkbox" class="checkbox" id="forms-rtl-shipping" checked />
        <label class="label font-normal" for="forms-rtl-shipping" data-i18n="sameAsShipping">نفس عنوان الشحن</label>
      </div>
    </div>
  </fieldset>
  <fieldset class="field-set">
    <div class="field-group">
      <div class="field">
        <label class="label" for="forms-rtl-comments" data-i18n="comments">تعليقات</label>
        <textarea class="textarea resize-none" id="forms-rtl-comments" placeholder="أضف أي تعليقات إضافية" data-i18n-placeholder="commentsPlaceholder"></textarea>
      </div>
    </div>
  </fieldset>
  <div class="field field-horizontal">
    <button class="btn" type="submit" data-i18n="submit">إرسال</button>
    <button class="btn btn-outline" type="button" data-i18n="cancel">إلغاء</button>
  </div>
</form>
 
<script>
  const translations = {
    ar: { dir: "rtl", paymentMethod: "طريقة الدفع", secureTransactions: "جميع المعاملات آمنة ومشفرة", nameOnCard: "الاسم على البطاقة", cardNumber: "رقم البطاقة", cardNumberDescription: "أدخل رقم البطاقة المكون من 16 رقمًا", month: "الشهر", year: "السنة", cvv: "CVV", monthPlaceholder: "ش.ش", month01: "٠١", month02: "٠٢", month03: "٠٣", month04: "٠٤", month05: "٠٥", month06: "٠٦", month07: "٠٧", month08: "٠٨", month09: "٠٩", month10: "١٠", month11: "١١", month12: "١٢", billingAddress: "عنوان الفوترة", billingAddressDescription: "عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك", sameAsShipping: "نفس عنوان الشحن", comments: "تعليقات", commentsPlaceholder: "أضف أي تعليقات إضافية", submit: "إرسال", cancel: "إلغاء" },
    he: { dir: "rtl", paymentMethod: "אמצעי תשלום", secureTransactions: "כל העסקאות מאובטחות ומוצפנות", nameOnCard: "שם על הכרטיס", cardNumber: "מספר כרטיס", cardNumberDescription: "הזן את מספר הכרטיס בן 16 הספרות שלך", month: "חודש", year: "שנה", cvv: "CVV", monthPlaceholder: "MM", month01: "01", month02: "02", month03: "03", month04: "04", month05: "05", month06: "06", month07: "07", month08: "08", month09: "09", month10: "10", month11: "11", month12: "12", billingAddress: "כתובת חיוב", billingAddressDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך", sameAsShipping: "זהה לכתובת המשלוח", comments: "הערות", commentsPlaceholder: "הוסף הערות נוספות", submit: "שלח", cancel: "בטל" },
    en: { dir: "ltr", paymentMethod: "Payment Method", secureTransactions: "All transactions are secure and encrypted", nameOnCard: "Name on Card", cardNumber: "Card Number", cardNumberDescription: "Enter your 16-digit card number", month: "Month", year: "Year", cvv: "CVV", monthPlaceholder: "MM", month01: "01", month02: "02", month03: "03", month04: "04", month05: "05", month06: "06", month07: "07", month08: "08", month09: "09", month10: "10", month11: "11", month12: "12", billingAddress: "Billing Address", billingAddressDescription: "The billing address associated with your payment method", sameAsShipping: "Same as shipping address", comments: "Comments", commentsPlaceholder: "Add any additional comments", submit: "Submit", cancel: "Cancel" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("forms-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
    document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
      el.placeholder = t[el.dataset.i18nPlaceholder];
    });
  });
</script>

Components

Field lays out labels, controls, descriptions, and errors
Label names a form control
Input captures single-line text, like emails and passwords
Input Group composes icons, text, and buttons inside one field
Textarea captures multi-line text
Select picks one option from a native list
Combobox searches a list of options, single or multi select
Checkbox toggles options on and off
Radio Group picks a single option from a set
Switch toggles a setting on and off
Slider picks a value or range along a track
Button submits the form and triggers actions
Button Group attaches related buttons and fields together