Default
An example of Tailwind CSS Input Group component with text addons.
Add on
Add on
<div class="input-group">
<span class="btn btn-input">
Add on
</span>
<input class="input" placeholder="Example input" type="text" value=""/>
</div>
<div class="input-group">
<input class="input" placeholder="Example input" type="text" value=""/>
<span class="btn btn-input">
Add on
</span>
</div>
Icon
Use
KeenIcons
to integrate icons into Tailwind CSS Input Group, providing an intuitive form experience.
<div class="input-group">
<span class="btn btn-icon btn-icon-lg btn-input">
<i class="ki-outline ki-user-square">
</i>
</span>
<input class="input" placeholder="Example input" type="text" value=""/>
</div>
<div class="input-group">
<input class="input" placeholder="Example input" type="text" value=""/>
<span class="btn btn-icon btn-icon-lg btn-input">
<i class="ki-outline ki-user-square">
</i>
</span>
</div>
Buttons
Incorporate the
Tailwind CSS Button
within the Tailwind CSS Input Group to enable actions.
Button
Button
<div class="input-group">
<span class="btn btn-primary">
Button
</span>
<input class="input" placeholder="Example input" type="text" value=""/>
</div>
<div class="input-group">
<input class="input" placeholder="Example input" type="text" value=""/>
<span class="btn btn-primary">
Button
</span>
</div>
Dropdown
Integrate the
Tailwind CSS Dropdown
within the Tailwind CSS Input Group to enable a dropdown menu with actions.
<div class="input-group w-full">
<input class="input" placeholder="Example input" type="text" value=""/>
<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
<button class="dropdown-toggle btn btn-primary">
Dropdown
<i class="ki-outline ki-down !text-sm dropdown-open:hidden">
</i>
<i class="ki-outline ki-up !text-sm hidden dropdown-open:block">
</i>
</button>
<div class="dropdown-content w-full max-w-48 py-2" data-dropdown-dismiss="true">
<div class="menu menu-default flex flex-col w-full">
<span class="menu-item">
<a class="menu-link" href="#">
<span class="menu-icon">
<i class="ki-outline ki-message-programming">
</i>
</span>
<span class="menu-title">
Tab 3
</span>
<span class="menu-badge">
<span class="badge badge-circle badge-success size-5">
5
</span>
</span>
</a>
</span>
<span class="menu-item">
<a class="menu-link" href="#">
<span class="menu-icon">
<i class="ki-outline ki-profile-circle">
</i>
</span>
<span class="menu-title">
Tab 4
</span>
</a>
</span>
<span class="menu-item">
<a class="menu-link" href="#">
<span class="menu-icon">
<i class="ki-outline ki-setting-2">
</i>
</span>
<span class="menu-title">
Tab 5
</span>
</a>
</span>
</div>
</div>
</div>
</div>
Multiple Addons
An example of Tailwind CSS Input Group component with multiple text addons.
Multiple Buttons
An example of Tailwind CSS Input Group component with multiple buttons.
Multiple Inputs
An example of Tailwind CSS Input Group component with multiple inputs.
Sizes
To change Tailwind CSS Input Group size, use the classes
.input-sm
,
.input-lg
,
.btn-sm
and
.btn-lg
respectively.
<div class="input-group">
<input class="input input-sm" placeholder="Small" type="text" value=""/>
<button class="btn btn-sm btn-primary">
Button
</button>
</div>
<div class="input-group">
<input class="input" placeholder="Default" type="text" value=""/>
<button class="btn btn-primary">
Button
</button>
</div>
<div class="input-group">
<input class="input input-lg" placeholder="Large" type="text" value=""/>
<button class="btn btn-lg btn-primary">
Button
</button>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Input Group 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-group.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Input Group component. |