Metronic - Tailwind CSS Input

A basic example of Tailwind CSS Input with a placeholder label.

				
					<input class="input" placeholder="Text input" type="text" value=""/>

Display a Tailwind CSS Input with an associated form input label element for better accessibility and user experience.

Preview HTML

Example Label

				
					<div class="w-full">
 <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
  <label class="form-label max-w-32">
   Example Label
  </label>
  <input class="input" name="email" placeholder="Enter email address" type="text" value="jason@studio.io"/>
 </div>
</div>

Display a Tailwind CSS Input with a required field indicator to enhance accessibility and user experience.

Preview HTML

Example Label *

				
					<div class="w-full">
 <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
  <label class="form-label flex items-center gap-1 max-w-32">
   Example Label
   <span class="text-danger">
    *
   </span>
  </label>
  <input class="input" name="email" placeholder="Enter email address" type="text" value=""/>
 </div>
</div>

Include hint text below a Tailwind CSS Input for an additional guidance or context for the input field.

Preview HTML

Example Label

Hint text goes here

				
					<div class="w-full">
 <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
  <label class="form-label max-w-32">
   Example Label
  </label>
  <div class="flex flex-col w-full gap-1">
   <input class="input" name="email" placeholder="Enter email address" type="text" value="jason@studio.io"/>
   <span class="form-hint">
    Hint text goes here
   </span>
  </div>
 </div>
</div>

Use KeenIcons to integrate icons into Tailwind CSS Input, providing an intuitive form experience.

Preview HTML

				
					<div class="input">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Input with icon" type="text" value=""/>
</div>
<div class="input">
 <input placeholder="Right icon" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</div>
<div class="input">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Both icons" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</div>

Utilize the Tailwind CSS Tooltip to integrate hint text into Tailwind CSS Input, providing a well-guided form experience.

Preview HTML

				
					<label class="input">
 <input placeholder="Right icon" type="text" value=""/>
 <span class="leading-none" data-tooltip="#my_tooltip">
  <i class="ki-outline ki-information-4">
  </i>
 </span>
</label>
<div class="tooltip" id="my_tooltip">
 Hey, a delightful tooltip is here!
</div>

Utilize Tailwind CSS Input validation states based on the form validation status to enhance user feedback and overall form usability.

Preview HTML

				
					<input class="input" placeholder="Default state" type="text" value=""/>
<input class="input border-danger" placeholder="Error state" type="text" value=""/>
<input class="input border-success" placeholder="Success state" type="text" value=""/>

Use the


         disabled

attribute of the Tailwind CSS Input to indicate non-interactivity.

Preview HTML

				
					<input class="input" disabled="" placeholder="Disabled state" type="text" value=""/>

Use the


         .input-sm

and


         .input-lg

custom classes to adjust the size of Tailwind CSS Input fields, providing flexibility for different design requirements.

Preview HTML

				
					<label class="input input-sm">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Small" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>
<label class="input">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Default" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>
<label class="input input-lg">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Large" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>

Use the


         .input-sm

and


         .input-lg

custom classes to adjust the size of Tailwind CSS Input fields with icons, providing flexibility for different design requirements.

Preview HTML

				
					<label class="input input-sm">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Small" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>
<label class="input">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Default" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>
<label class="input input-lg">
 <i class="ki-outline ki-magnifier">
 </i>
 <input placeholder="Large" type="text" value=""/>
 <button class="btn btn-icon">
  <i class="ki-outline ki-setting-4">
  </i>
 </button>
</label>

The following source file manages the CSS styles of the Tailwind CSS Input component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the


         dist/assets/css/styles.css

bundle, making it available globally across all pages.

File	Description
`src/core/plugins/components/input.js`	The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Input component.

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Input

Default Input

Label

Required

Hint

Icon

Tooltip

Validation

Disabled

Sizes - Default

Sizes - With Icon

Source Code

On This Page