Forms

Tailwind CSS form components including inputs, textareas, selects, checkboxes, and labels.

<form class="grid gap-8 max-w-sm">
  <div class="grid gap-3">
    <label class="label" for="full-name">Full name</label>
    <input class="input" type="text" id="full-name" placeholder="John Smith" />
  </div>
  <div class="grid gap-3">
    <label class="label" for="email">Email</label>
    <input class="input" type="email" id="email" placeholder="john@example.com" />
  </div>
  <div class="grid gap-3">
    <label class="label" for="event-date">Event date</label>
    <input class="input" type="date" id="event-date" />
  </div>
  <div class="grid gap-3">
    <label class="label" for="event-type">Event type</label>
    <select class="select" id="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>
      <option value="anniversary">Anniversary</option>
      <option value="other">Other</option>
    </select>
  </div>
  <div class="grid gap-3">
    <label class="label" for="menu-file">Upload menu preferences</label>
    <input class="input" type="file" id="menu-file" accept=".pdf,.doc,.docx" />
  </div>
  <div class="grid gap-3">
    <label class="label" for="details">Additional details</label>
    <textarea class="textarea" id="details" placeholder="Tell us about your event, dietary requirements, venue details..."></textarea>
  </div>
  <div class="flex items-center gap-2">
    <input class="checkbox" type="checkbox" id="newsletter" />
    <label class="label" for="newsletter">Send me news and special offers</label>
  </div>
  <button class="btn" type="submit">Submit Request</button>
</form>

Input groups

Decorate inputs with icons, text, or other addons using input groups.

<div class="grid gap-6 w-full max-w-sm">
  <div class="input-group">
    <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
    <input class="input" placeholder="Search..." />
  </div>
  <div class="input-group">
    <span class="input-group-addon"><svg 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="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></span>
    <input class="input" type="email" placeholder="Enter your email" />
  </div>
  <div class="input-group">
    <span class="input-group-addon"><svg 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"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg></span>
    <input class="input" placeholder="Card number" />
    <span class="input-group-addon"><svg 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="M20 6 9 17l-5-5"></path></svg></span>
  </div>
  <div class="input-group">
    <input class="input" placeholder="Rate this" />
    <span class="input-group-addon">
      <svg 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="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
      <svg 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"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
    </span>
  </div>
</div>

Input groups can include text addons for prefixes, suffixes, or units.

$ USD
https:// .com
@company.com 
<div class="grid gap-6 w-full max-w-sm">
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input class="input" placeholder="0.00" />
    <span class="input-group-addon">USD</span>
  </div>
  <div class="input-group">
    <span class="input-group-addon">https://</span>
    <input class="input" placeholder="example" />
    <span class="input-group-addon">.com</span>
  </div>
  <div class="input-group">
    <input class="input" placeholder="Enter your username" />
    <span class="input-group-addon">@company.com</span>
  </div>
</div>

You can also use Button Group with inputs for text addons.

https:// 
<div class="btn-group w-full max-w-sm">
  <span class="btn-group-text">https://</span>
  <input class="input" placeholder="example.com" />
</div>

Sizes

Form elements come in three sizes that match button heights.

<div class="flex flex-col gap-6 w-full max-w-sm">
  <div class="flex gap-4 items-end">
    <input class="input input-sm flex-1" type="text" placeholder="Small" />
    <select class="select select-sm flex-1">
      <option>Small</option>
    </select>
    <div class="input-group input-group-sm flex-1">
      <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
      <input class="input" placeholder="Small" />
    </div>
  </div>
  <div class="flex gap-4 items-end">
    <input class="input flex-1" type="text" placeholder="Base" />
    <select class="select flex-1">
      <option>Base</option>
    </select>
    <div class="input-group flex-1">
      <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
      <input class="input" placeholder="Base" />
    </div>
  </div>
  <div class="flex gap-4 items-end">
    <input class="input input-lg flex-1" type="text" placeholder="Large" />
    <select class="select select-lg flex-1">
      <option>Large</option>
    </select>
    <div class="input-group input-group-lg flex-1">
      <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
      <input class="input" placeholder="Large" />
    </div>
  </div>
</div>

Disabled state

Disabled form elements appear faded and cannot be interacted with. Add peer to the input so the label also dims.

<div class="flex flex-col gap-6 w-full max-w-sm">
  <div class="input-group">
    <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
    <input class="input" placeholder="Searching..." disabled />
    <span class="input-group-addon">
      <svg 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" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
    </span>
  </div>
  <input class="input" type="text" placeholder="Disabled input" disabled />
  <select class="select" disabled>
    <option>Disabled select</option>
  </select>
  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
  <div class="flex items-center gap-2">
    <input class="checkbox peer" type="checkbox" id="disabled-checkbox" disabled />
    <label class="label" for="disabled-checkbox">Disabled checkbox</label>
  </div>
</div>

Invalid state

Form elements show a red ring when marked as invalid. Use aria-describedby to associate error messages.

Not a valid email address

Please select a country

$ USD

Amount must be positive 

<div class="flex flex-col gap-6 w-full max-w-sm">
  <div class="grid gap-2">
    <label class="label" for="email-invalid">Email address</label>
    <input
      class="input"
      type="email"
      id="email-invalid"
      value="johndoe"
      aria-invalid="true"
      aria-describedby="email-error"
    />
    <p id="email-error" class="text-sm text-destructive">
      Not a valid email address
    </p>
  </div>
  <div class="grid gap-2">
    <label class="label" for="country-invalid">Country</label>
    <select
      class="select"
      id="country-invalid"
      aria-invalid="true"
      aria-describedby="country-error"
    >
      <option value="">Select a country</option>
      <option value="us">United States</option>
    </select>
    <p id="country-error" class="text-sm text-destructive">
      Please select a country
    </p>
  </div>
  <div class="flex items-center gap-2">
    <input class="checkbox" type="checkbox" id="invalid-cb" aria-invalid="true" />
    <label class="label" for="invalid-cb">You must accept the terms</label>
  </div>
  <div class="grid gap-2">
    <label class="label" for="amount-invalid">Amount</label>
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input
        class="input"
        id="amount-invalid"
        value="-50"
        aria-invalid="true"
        aria-describedby="amount-error"
      />
      <span class="input-group-addon">USD</span>
    </div>
    <p id="amount-error" class="text-sm text-destructive">
      Amount must be positive
    </p>
  </div>
</div>

How it works

Form components are CSS-only styled native HTML elements.

Structure

Form elements use their native HTML elements with corresponding classes:

<input class="input" type="text" placeholder="Text input" />
<textarea class="textarea" placeholder="Textarea"></textarea>
<select class="select">
  <option>Option 1</option>
</select>
<input class="checkbox" type="checkbox" />
<label class="label">Label text</label>

For accessibility, pair inputs with labels using matching id and for attributes:

<div class="space-y-2">
  <label class="label" for="email">Email</label>
  <input class="input" type="email" id="email" placeholder="you@example.com" />
</div>

For checkboxes, use an inline layout:

<div class="flex items-center gap-2">
  <input class="checkbox" type="checkbox" id="terms" />
  <label class="label" for="terms">Accept terms</label>
</div>

For input groups, wrap the input with addons:

<div class="input-group">
  <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
  <input class="input" placeholder="Search..." />
</div>

Class reference

All available classes for form components.

ClassDescription
inputAdd to <input> element for styled input
input-smAdd to .input for small size
input-baseAdd to .input for base size (default)
input-lgAdd to .input for large size
textareaAdd to <textarea> element for styled textarea
selectAdd to <select> element for styled select with chevron
select-smAdd to .select for small size
select-baseAdd to .select for base size (default)
select-lgAdd to .select for large size
checkboxAdd to <input type="checkbox"> for styled checkbox
labelAdd to <label> element for styled form label
input-groupAdd to container for grouped input styling
input-group-smAdd to .input-group for small size
input-group-baseAdd to .input-group for base size (default)
input-group-lgAdd to .input-group for large size
input-group-addonAdd to addon elements (icons, text)
<input class="input" type="text" />
<input class="input input-sm" type="text" />
<textarea class="textarea"></textarea>
<select class="select">...</select>
<input class="checkbox" type="checkbox" />
<label class="label">Label</label>

All elements

A comprehensive reference of all form elements, variants, and sizes.

<!-- Input types -->
<input class="input" type="text" placeholder="Text" />
<input class="input" type="email" placeholder="Email" />
<input class="input" type="password" placeholder="Password" />
<input class="input" type="number" placeholder="Number" />
<input class="input" type="date" />
<input class="input" type="file" />
 
<!-- Input sizes -->
<input class="input input-sm" type="text" />
<input class="input" type="text" />
<input class="input input-lg" type="text" />
 
<!-- Textarea -->
<textarea class="textarea"></textarea>
 
<!-- Select and sizes -->
<select class="select">...</select>
<select class="select select-sm">...</select>
<select class="select select-lg">...</select>
 
<!-- Checkbox -->
<input class="checkbox" type="checkbox" />
 
<!-- Label -->
<label class="label">Label</label>
 
<!-- Input group -->
<div class="input-group">
  <span class="input-group-addon"><svg 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="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg></span>
  <input class="input" placeholder="Search..." />
</div>
<div class="input-group input-group-sm">...</div>
<div class="input-group input-group-lg">...</div>