Tailwind CSS Input

Class Name	Type	Description
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.

Label and helper text

Use the label and label-text classes for the main label, and label-text-alt for helper text to provide additional guidance. This structure ensures clarity and proper styling with Tailwind CSS.

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

Hidden label

label elements hidden using the .sr-only class.

Types

Default

Use input with label and label-text classes.

Floating label

Use relative in the parent div, 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 (~).

<div class="relative w-96">
  <input type="text" placeholder="John Doe" class="input input-floating peer" id="floatingInput" />
  <label class="input-floating-label" for="floatingInput">Full name</label>
</div>

Filled label

Use relative in the parent div, 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="relative w-96">
  <input type="text" placeholder="John Doe" class="input input-filled peer" id="filledInput" />
  <label class="input-filled-label" for="filledInput">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="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating input-sm peer" id="floatingLabelSmall" />
  <label class="input-floating-label" for="floatingLabelSmall">Full Name</label>
</div>

<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating peer" id="floatingLabelDefault" />
  <label class="input-floating-label" for="floatingLabelDefault">Full Name</label>
</div>

<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating input-lg peer" id="floatingLabelLarge" />
  <label class="input-floating-label" for="floatingLabelLarge">Full Name</label>
</div>

Filled label

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

<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled input-sm peer" id="filledLabelSmall" />
  <label class="input-filled-label" for="filledLabelSmall">Full Name</label>
  <span class="input-filled-focused"></span>
</div>
<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled peer" id="filledLabelDefault" />
  <label class="input-filled-label" for="filledLabelDefault">Full Name</label>
  <span class="input-filled-focused"></span>
</div>
<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled input-lg peer" id="filledLabelLarge" />
  <label class="input-filled-label" for="filledLabelLarge">Full Name</label>
  <span class="input-filled-focused"></span>
</div>

Validation State

Success state

Success state can be show using is-valid class.

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

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

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

Error state

Error state can be show using is-invalid class.

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

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

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

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.

<div class="input-group max-w-sm">
  <label class="input-group-text" for="inlineLabelName">Name</label>
  <input type="text" class="input grow" placeholder="FlyonUI" id="inlineLabelName" />
</div>
<div class="input-group max-w-sm">
  <label class="input-group-text" for="inlineLabelEmail">Email</label>
  <input type="email" class="input grow" placeholder="admin@site.com" id="inlineLabelEmail" />
</div>

Leading icon

Add a leading icon inside input.

<div class="input-group max-w-sm">
  <span class="input-group-text">
    <span class="icon-[tabler--user] text-base-content/80 size-5"></span>
  </span>
  <label class="sr-only" for="leadingIconDefault">Full Name</label>
  <input type="text" class="input grow" placeholder="John Doe" id="leadingIconDefault" />
</div>

<div 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="grow relative">
    <input type="text" placeholder="John Doe" class="input input-floating peer" id="leadingIconFloating" />
    <label class="input-floating-label"  for="leadingIconFloating">Full Name</label>
  </div>
</div>

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">
  <div class="input-group-filled">
    <span class="input-group-text">
      <span class="icon-[tabler--user] text-base-content/80 size-6"></span>
    </span>
    <div class="relative grow">
      <input type="text" placeholder="John Doe" class="input input-filled peer" id="leadingIconFilled" />
      <label class="input-filled-label" for="leadingIconFilled" >Full Name</label>
    </div>
  </div>
  <span class="input-filled-focused"></span>
</div>

Trailing icon

Add a trailing icon inside input.

<div class="input-group max-w-sm">
  <input type="text" class="input grow" placeholder="xxxx-xxxx-xxxx-xxxx" id="trailingIconDefault" />
  <label class="sr-only" for="trailingIconDefault"> Card Number </label>
  <span class="input-group-text">
    <span class="icon-[tabler--brand-mastercard] text-base-content/80 size-5"></span>
  </span>
</div>

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

Trailing icon in filled input

Add a trailing icon inside filled input.

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

Leading and trailing icon

Add a leading and trailing icon inside input.

<div class="input-group max-w-sm">
  <span class="input-group-text">$</span>
  <input type="number" class="input grow" placeholder="00.00" id="trailingAndLeadingInput" />
  <label class="sr-only" for="trailingAndLeadingInput">Enter amount</label>
  <span class="input-group-text">USD</span>
</div>

With keyboard shortcut

Utilizes kbd component class with input.

<div 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" id="kbdInput" />
  <label class="sr-only" for="kbdInput">Search</label>
  <span class="input-group-text gap-2">
    <kbd class="kbd kbd-sm">⌘</kbd>
    <kbd class="kbd kbd-sm">K</kbd>
  </span>
</div>

Checkbox and radios

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

<div 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" />
</div>

<div 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" />
</div>

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.

<div class="max-w-sm">
  <label class="label label-text" for="pillInput"> Full Name </label>
  <input type="text" placeholder="John Doe" class="input rounded-full" id="pillInput" />
</div>

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

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

Illustrations

Helper text

Implement varying input styles accompanied by helper text.

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

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

  <div class="relative max-w-sm">
    <input type="text" placeholder="John Doe" class="input input-filled peer" id="helperTextFilledInput" />
    <label class="input-filled-label" for="helperTextFilledInput">Full Name</label>
    <span class="input-filled-focused"></span>
    <span class="label">
      <span class="label-text-alt">Please write your full name</span>
    </span>
  </div>
</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.

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

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

<div class="max-w-sm">
  <span class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </span>
  <div class="relative">
    <input type="text" placeholder="John Doe" class="input input-filled peer" if="helperTextPositionFilledInput" />
    <label class="input-filled-label" for="helperTextPositionFilledInput">Full Name</label>
    <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>
</div>

Disabled

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

<div class="w-96">
  <label class="label label-text" for="disabledInput"> What is your name? </label>
  <input type="text" placeholder="John Doe" class="input" id="disabledInput" disabled />
</div>

<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-floating peer" id="disabledFloatingInput" disabled/>
  <label class="input-floating-label" for="disabledFloatingInput">Full Name</label>
</div>

<div class="relative max-w-sm">
  <input type="text" placeholder="John Doe" class="input input-filled peer" id="disabledFilledInput" disabled />
  <label class="input-filled-label" for="disabledFilledInput">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">
  <div class="input-group join-item">
    <span class="input-group-text">
      <span class="icon-[tabler--user] text-base-content/80 size-5"></span>
    </span>
    <label class="sr-only" for="groupInput">Full Name</label>
    <input type="text" class="input grow" placeholder="John Doe" id="groupInput" />
  </div>
  <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>