Tailwind CSS Input

Class Name	Type	Description
form-control	Component	Base class for file input container.
label	Component	Container class for helper texts.
label-text	Component	Base class for title label text.
label-text-alt	Component	Base class for helper label text.
input	Component	Base class for form input.
input-floating	Component	Base class for floating form input.
input-floating-filled	Component	Filled input with floating label.
input-group	Component	Adds inline addons to inputs.
input-group-filled	Component	Inline addon for filled inputs.
input-group-text	Component	Container that holds the add-ons.
input-floating-label	Component	Floats the label to the top.
input-filled-label	Component	Keeps the label at the top.
input-filled-focused	Component	Adds animation to the bottom border of a filled input.
no-focus	Modifier	remove default focus form input, input-group etc
is-valid	Modifier	Adds success style to the input.
is-invalid	Modifier	Adds error style to the input.
input-xs	Responsive	Input with Extra small size.
input-sm	Responsive	Input with Smaller size.
input-lg	Responsive	Input with Larger size.

Basic examples

Default

Utilize the input component class to style the input.

The form-control serves as a container for both the label and the input. Within this container, the label class has two distinct styles: label-text for the input label and label-text-alt for the helper text.

<label class="form-control w-96">
  <div class="label">
    <span class="label-text">Full Name</span>
  </div>
  <input type="text" placeholder="John Doe" class="input" />
  <div class="label">
    <span class="label-text-alt">Please write your full name</span>
  </div>
</label>

Hidden label

label elements hidden using the .sr-only class.

<label class="form-control w-96">
  <div class="label sr-only">
    <span class="label-text">Full name</span>
  </div>
  <input type="text" id="input-email-label" class="input" placeholder="John Doe" />
</label>

Types

Default

Use input with label and label-text classes and wrap it with form-control for standard/default inputs.

Floating label

Use input-floating and peer for standard inputs and input-floating-label to label for floating inputs.

Each input needs a placeholder for our method, which relies on the :placeholder-shown pseudo-element. Make sure the input comes before the label to use the sibling selector (~).

Filled label

Use input-filled and peer for standard inputs and input-filled-label to label for filled floating inputs.

Each input requires a placeholder for our method, which utilizes the :placeholder-shown pseudo-element. Ensure the input precedes the label to enable sibling selector usage (~). Add input-filled-focused for focus border animation.

<div class="form-control w-96">
  <input type="text" placeholder="John Doe" class="input input-filled peer" />
  <label class="input-filled-label">Full Name</label>
  <span class="input-filled-focused"></span>
</div>

Sizes

Default

Input elements come in three sizes: small, default, and large, which can be applied by adding the classes input-xs, input-sm and input-lg along with the input class.

<input type="text" placeholder="John Doe" class="input input-xs max-w-sm" />
<input type="text" placeholder="John Doe" class="input input-sm max-w-sm" />
<input type="text" placeholder="John Doe" class="input max-w-sm" />
<input type="text" placeholder="John Doe" class="input input-lg max-w-sm" />

Floating label

For the floating label input, specify sizes as default, small, and large.

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating input-sm peer" />
  <label class="input-floating-label">Full Name</label>
</div>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating peer" />
  <label class="input-floating-label">Full Name</label>
</div>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating input-lg peer" />
  <label class="input-floating-label">Full Name</label>
</div>

Filled label

For the Filled label input, specify sizes as default, small, and large.

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled input-sm peer" />
  <label class="input-filled-label">Full Name</label>
  <span class="input-filled-focused"></span>
</div>
<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled peer" />
  <label class="input-filled-label">Full Name</label>
  <span class="input-filled-focused"></span>
</div>
<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled input-lg peer" />
  <label class="input-filled-label">Full Name</label>
  <span class="input-filled-focused"></span>
</div>

Validation State

Success state

Success state can be show using is-valid class.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="John Doe" class="input is-valid" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-floating is-valid peer" />
    <span class="input-floating-label">Full Name</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-filled is-valid peer" />
    <span class="input-filled-label">Full Name</span>
    <span class="input-filled-focused"></span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Error state

Error state can be show using is-invalid class.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="John Doe" class="input is-invalid" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-floating is-invalid peer" />
    <span class="input-floating-label">Full Name</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-filled is-invalid peer" />
    <span class="input-filled-label">Full Name</span>
    <span class="input-filled-focused"></span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Merged inputs

Inline label

The input-group component class acts as a container, while the input-group-text can include special characters, icons, keyboard keys, and more.

Utilize input-group and input-group-filled for inline addon items that will be surrounded by the input.

<label class="input-group max-w-sm">
  <span class="input-group-text">Name</span>
  <input type="text" class="input grow" placeholder="Flyon" />
</label>
<label class="input-group max-w-sm">
  <span class="input-group-text">Email</span>
  <input type="email" class="input grow" placeholder="admin@site.com" />
</label>

Leading icon

Add a leading icon inside input.

<label class="input-group max-w-sm">
  <span class="input-group-text">
    <span class="icon-[tabler--user] text-base-content/80 size-5"></span>
  </span>
  <input type="text" class="input grow" placeholder="John Doe" />
</label>

<label class="input-group max-w-sm">
  <span class="input-group-text">
    <span class="icon-[tabler--user] text-base-content/80 size-5"></span>
  </span>
  <div class="form-control grow">
    <input type="text" placeholder="John Doe" class="input input-floating peer" />
    <span class="input-floating-label">Full Name</span>
  </div>
</label>

Leading icon in filled input

Instead of using input-group, use input-group-filled to incorporate a leading icon within a filled input.
For border animations, input-filled-focused must be a general sibling to input-group-filled.

<div class="max-w-sm">
  <label class="input-group-filled">
    <span class="input-group-text">
      <span class="icon-[tabler--user] text-base-content/80 size-6"></span>
    </span>
    <div class="form-control grow">
      <input type="text" placeholder="John Doe" class="input input-filled peer" />
      <span class="input-filled-label">Full Name</span>
    </div>
  </label>
  <span class="input-filled-focused"></span>
</div>

Trailing icon

Add a trailing icon inside input.

<label class="input-group max-w-sm">
  <input type="text" class="input grow" placeholder="xxxx-xxxx-xxxx-xxxx" />
  <span class="input-group-text">
    <span class="icon-[tabler--brand-mastercard] text-base-content/80 size-5"></span>
  </span>
</label>

<label class="input-group max-w-sm">
  <div class="form-control w-full">
    <input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" class="input input-floating peer" />
    <span class="input-floating-label">Card Number</span>
  </div>
  <span class="input-group-text">
    <span class="icon-[tabler--brand-mastercard] text-base-content/80 size-5"></span>
  </span>
</label>

Trailing icon in filled input

Add a trailing icon inside filled input.

<div class="max-w-sm">
  <label class="input-group-filled">
    <div class="form-control w-full">
      <input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" class="input input-filled peer" />
      <span class="input-filled-label">Card Number</span>
    </div>
    <span class="input-group-text">
      <span class="icon-[tabler--brand-mastercard] text-base-content/80 size-6"></span>
    </span>
  </label>
  <span class="input-filled-focused"></span>
</div>

Leading and trailing icon

Add a leading and trailing icon inside input.

With keyboard shortcut

Utilizes kbd component class with input.

<label class="input-group max-w-sm">
  <span class="input-group-text">
    <span class="icon-[tabler--search] text-base-content/80 size-6"></span>
  </span>
  <input type="search" class="input input-lg grow" placeholder="Search" />
  <span class="input-group-text gap-2">
    <kbd class="kbd kbd-sm">⌘</kbd>
    <kbd class="kbd kbd-sm">K</kbd>
  </span>
</label>

Checkbox and radios

Place any checkbox or radio option within an input group’s addon instead of text.

<label class="input-group max-w-sm">
  <span class="input-group-text">
    <input type="checkbox" class="checkbox checkbox-primary" />
  </span>
  <input type="text" class="input grow" placeholder="John Doe" />
</label>
<label class="input-group max-w-sm">
  <span class="input-group-text">
    <input type="radio" name="radio-1" class="radio radio-primary" />
  </span>
  <input type="text" class="input grow" placeholder="John Doe" />
</label>

Inline select

Use input-group to create an inline select.

<div class="input-group max-w-sm">
  <input class="input" placeholder="Search" />
  <select class="select input-group-text w-1/3 max-sm:w-3/5" aria-label="select">
    <option disabled selected>Filter</option>
    <option>Sci-fi</option>
    <option>Drama</option>
    <option>Action</option>
  </select>
</div>

Shape

Pill input

We can manage the input’s radius using the rounded utility class provided by Tailwind CSS.

The `input-filled-focused` class will not function properly when a bottom radius is applied.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
  </div>
  <input type="text" placeholder="John Doe" class="input rounded-full" />
</label>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating peer rounded-full" />
  <label class="input-floating-label">Full Name</label>
</div>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled peer rounded-full" />
  <label class="input-filled-label">Full Name</label>
</div>

Illustrations

Helper text

Implement varying input styles accompanied by helper text.

<div class="space-y-3">
  <label class="form-control">
    <div class="label">
      <span class="label-text">Full Name</span>
    </div>
    <input type="text" placeholder="John Doe" class="input max-w-sm" />
    <div class="label">
      <span class="label-text-alt">Please write your full name</span>
    </div>
  </label>

  <label class="form-control max-w-sm">
    <input type="text" placeholder="John Doe" class="input input-floating peer" />
    <span class="input-floating-label">Full Name</span>
    <div class="label">
      <span class="label-text-alt">Please write your full name</span>
    </div>
  </label>

  <label class="form-control max-w-sm">
    <input type="text" placeholder="John Doe" class="input input-filled peer" />
    <span class="input-filled-label">Full Name</span>
    <span class="input-filled-focused"></span>
    <div class="label">
      <span class="label-text-alt">Please write your full name</span>
    </div>
  </label>
</div>

No focus

Disable the default focus on the input using no-focus class when necessary.

Helper text positions

Helper text can be positioned accordingly as demonstrated below.

<label class="form-control max-w-sm">
  <div class="label">
    <span class="label-text">Full Name</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="John Doe" class="input" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-floating peer" />
    <span class="input-floating-label">Full Name</span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<label class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="form-control">
    <input type="text" placeholder="John Doe" class="input input-filled peer" />
    <span class="input-filled-label">Full Name</span>
    <span class="input-filled-focused"></span>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

Disabled

Add the disabled boolean attribute on an input to remove pointer events, and prevent focusing.

<label class="form-control w-96">
  <div class="label">
    <span class="label-text">What is your name?</span>
  </div>
  <input type="text" placeholder="John Doe" class="input" disabled />
</label>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating peer" disabled/>
  <label class="input-floating-label">Full Name</label>
</div>

<div class="form-control max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled peer" disabled />
  <label class="input-filled-label">Full Name</label>
  <span class="input-filled-focused"></span>
</div>

<div class="join max-w-sm">
  <input class="input join-item" placeholder="Search" />
  <button class="btn btn-outline btn-secondary join-item">Search</button>
</div>

<div class="join max-w-sm">
  <button class="btn btn-outline btn-secondary join-item">Search</button>
  <input class="input join-item" placeholder="Search" />
</div>

Input group with button

Combine a button with the input input.

<div class="join w-96">
  <label class="input-group join-item">
    <span class="input-group-text">
      <span class="icon-[tabler--user] text-base-content/80 size-5"></span>
    </span>
    <input type="text" class="input grow" placeholder="John Doe" />
  </label>
  <button class="btn btn-outline btn-secondary join-item h-auto">Search</button>
</div>

Input with select

Combine a select with the input input.

<div class="join w-96">
  <input class="input join-item" placeholder="Search" />
  <select class="select join-item w-36" aria-label="select">
    <option disabled selected>Filter</option>
    <option>Sci-fi</option>
    <option>Drama</option>
    <option>Action</option>
  </select>
</div>