Default Input
A basic example of Tailwind CSS Input with a placeholder label.
Label
Display a Tailwind CSS Input with an associated form input label element for better accessibility and user experience.
Required
Display a Tailwind CSS Input with a required field indicator to enhance accessibility and user experience.
<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>
Hint
Include hint text below a Tailwind CSS Input for an additional guidance or context for the input field.
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>
Icon
Use
KeenIcons
to integrate icons into Tailwind CSS Input, providing an intuitive form experience.
<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>
Tooltip
Utilize the
Tailwind CSS Tooltip
to integrate hint text into Tailwind CSS Input, providing a well-guided form experience.
Hey, a delightful tooltip is here!
<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>
Validation
Utilize Tailwind CSS Input validation states based on the form validation status to enhance user feedback and overall form usability.
Disabled
Use the
disabled
attribute of the Tailwind CSS Input to indicate non-interactivity.
Sizes - Default
Use the
.input-sm
and
.input-lg
custom classes to adjust the size of Tailwind CSS Input fields, providing flexibility for different design requirements.
<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>
Sizes - With Icon
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.
<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>
Source Code
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. |
