Tailwind CSS Input Group
Use the input group component to put icons, text, and buttons inside one bordered field, like a search box with its icon or a price with its currency. For attaching full-size buttons next to a field, reach for the button group.
<div class="input-group w-full max-w-sm">
<input class="input" placeholder="Search..." />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
<span class="input-group-addon input-group-addon-end">12 results</span>
</div>Usage
Add the input-group class to the wrapper and put a regular input or textarea inside. The wrapper takes over the border, focus ring, and invalid state for the whole field. Put extras in input-group-addon elements, where regular buttons shrink to fit the field.
<div class="input-group">
<input class="input" placeholder="Search..." />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
</div>Examples
Align start
The default addon leads the input.
<div class="field w-full max-w-sm">
<label class="label" for="ig-start-input">Input</label>
<div class="input-group">
<input class="input" id="ig-start-input" placeholder="Search..." />
<span class="input-group-addon"><svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
</div>
<p class="field-description">Icon positioned at the start.</p>
</div>Align end
Add input-group-addon-end to trail the input.
<div class="field w-full max-w-sm">
<label class="label" for="ig-end-input">Input</label>
<div class="input-group">
<input class="input" id="ig-end-input" type="password" placeholder="Enter password" />
<span class="input-group-addon input-group-addon-end"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg></span>
</div>
<p class="field-description">Icon positioned at the end.</p>
</div>Align block start
Add input-group-addon-block-start for a full-width header row above the control.
<div class="field-group w-full max-w-sm">
<div class="field">
<label class="label" for="ig-bs-input">Input</label>
<div class="input-group">
<input class="input" id="ig-bs-input" placeholder="Enter your name" />
<span class="input-group-addon input-group-addon-block-start">
<span class="input-group-text">Full Name</span>
</span>
</div>
<p class="field-description">Header positioned above the input.</p>
</div>
<div class="field">
<label class="label" for="ig-bs-textarea">Textarea</label>
<div class="input-group">
<textarea class="textarea font-mono text-sm" id="ig-bs-textarea" placeholder="console.log('Hello, world!');"></textarea>
<span class="input-group-addon input-group-addon-block-start">
<svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/></svg>
<span class="input-group-text font-mono">script.js</span>
<button class="btn btn-ghost btn-xs btn-icon ml-auto" type="button" aria-label="Copy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
</span>
</div>
<p class="field-description">Header positioned above the textarea.</p>
</div>
</div>Align block end
Add input-group-addon-block-end for a full-width footer row below the control.
<div class="field-group w-full max-w-sm">
<div class="field">
<label class="label" for="ig-be-input">Input</label>
<div class="input-group">
<input class="input" id="ig-be-input" placeholder="Enter amount" />
<span class="input-group-addon input-group-addon-block-end">
<span class="input-group-text">USD</span>
</span>
</div>
<p class="field-description">Footer positioned below the input.</p>
</div>
<div class="field">
<label class="label" for="ig-be-textarea">Textarea</label>
<div class="input-group">
<textarea class="textarea" id="ig-be-textarea" placeholder="Write a comment..."></textarea>
<span class="input-group-addon input-group-addon-block-end">
<span class="input-group-text">0/280</span>
<button class="btn btn-sm ml-auto shadow-none" type="button">Post</button>
</span>
</div>
<p class="field-description">Footer positioned below the textarea.</p>
</div>
</div>Input group with an icon
Drop svgs straight into addons and they size themselves.
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="input-group">
<input class="input" placeholder="Search..." />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
</div>
<div class="input-group">
<input class="input" type="email" placeholder="Enter your email" />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg></span>
</div>
<div class="input-group">
<input class="input" placeholder="Card number" />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg></span>
<span class="input-group-addon input-group-addon-end"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
</div>
<div class="input-group">
<input class="input" placeholder="Card number" />
<span class="input-group-addon input-group-addon-end"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>
</div>
</div>Input group with text
Wrap static text in input-group-text for prefixes, suffixes, and counters.
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="input-group">
<span class="input-group-addon"><span class="input-group-text">$</span></span>
<input class="input" placeholder="0.00" />
<span class="input-group-addon input-group-addon-end"><span class="input-group-text">USD</span></span>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="input-group-text">https://</span></span>
<input class="input pl-0.5!" placeholder="example.com" />
<span class="input-group-addon input-group-addon-end"><span class="input-group-text">.com</span></span>
</div>
<div class="input-group">
<input class="input" placeholder="Enter your username" />
<span class="input-group-addon input-group-addon-end"><span class="input-group-text">@company.com</span></span>
</div>
<div class="input-group">
<textarea class="textarea" placeholder="Enter your message"></textarea>
<span class="input-group-addon input-group-addon-block-end">
<span class="input-group-text text-xs text-muted-foreground">120 characters left</span>
</span>
</div>
</div>Input group with a button
Put regular buttons in an addon and they shrink to fit the field, and a popover or any other overlay can hang off them.
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="input-group">
<input class="input" value="https://x.com/shadcn" readonly />
<span class="input-group-addon input-group-addon-end">
<button class="btn btn-ghost btn-xs btn-icon" type="button" aria-label="Copy" title="Copy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
</span>
</div>
<div class="input-group [--radius:9999px]">
<span class="input-group-addon">
<button class="btn btn-secondary btn-xs btn-icon" id="ig-info-trigger" type="button" aria-label="Connection info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></button>
</span>
<span class="input-group-addon pl-1.5 text-muted-foreground">https://</span>
<input class="input" />
<span class="input-group-addon input-group-addon-end">
<button class="btn btn-ghost btn-xs btn-icon" type="button" aria-label="Favorite"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg></button>
</span>
</div>
<div class="input-group">
<input class="input" placeholder="Type to search..." />
<span class="input-group-addon input-group-addon-end">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
<div class="popover" data-sp-toggle="#ig-info-trigger" data-sp-placement="bottom-start">
<div class="popover-header">
<h4 class="popover-title">Your connection is not secure.</h4>
<p class="popover-description">You should not enter any sensitive information on this site.</p>
</div>
</div>
</div>Keyboard hint
Trail the input with a kbd to hint a shortcut.
<div class="input-group w-full max-w-sm">
<input class="input" placeholder="Search..." />
<span class="input-group-addon"><svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
<span class="input-group-addon input-group-addon-end"><kbd class="kbd">⌘K</kbd></span>
</div>Input group with a dropdown
Hang a dropdown off an addon button.
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="input-group">
<input class="input" placeholder="Enter file name" />
<span class="input-group-addon input-group-addon-end">
<button class="btn btn-ghost btn-xs btn-icon" id="ig-more-trigger" type="button" aria-label="More"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</span>
</div>
<div class="input-group [--radius:1rem]">
<input class="input" placeholder="Enter search query" />
<span class="input-group-addon input-group-addon-end">
<button class="btn btn-ghost pr-1.5! text-xs" id="ig-searchin-trigger" type="button">Search In... <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
</span>
</div>
<div class="dropdown" data-sp-toggle="#ig-more-trigger" data-sp-placement="bottom-end">
<button class="dropdown-item">Settings</button>
<button class="dropdown-item">Copy path</button>
</div>
<div class="dropdown [--radius:0.95rem]" data-sp-toggle="#ig-searchin-trigger" data-sp-placement="bottom-end">
<button class="dropdown-item">Documentation</button>
<button class="dropdown-item">Blog Posts</button>
</div>
</div>Loading state
Spin an icon in an addon while the field works.
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="input-group">
<input class="input" placeholder="Searching..." />
<span class="input-group-addon input-group-addon-end"><svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg></span>
</div>
<div class="input-group">
<input class="input" placeholder="Processing..." />
<span class="input-group-addon"><svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg></span>
</div>
<div class="input-group">
<input class="input" placeholder="Saving changes..." />
<span class="input-group-addon input-group-addon-end">
<span class="input-group-text">Saving...</span>
<svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
</div>
<div class="input-group">
<input class="input" placeholder="Refreshing data..." />
<span class="input-group-addon"><svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg></span>
<span class="input-group-addon input-group-addon-end">
<span class="input-group-text text-muted-foreground">Please wait...</span>
</span>
</div>
</div>Textarea input group
Full toolbars compose above and below a textarea with the block addons.
<div class="input-group w-full max-w-sm">
<textarea class="textarea min-h-[200px]" placeholder="console.log('Hello, world!');"></textarea>
<span class="input-group-addon input-group-addon-block-end border-t">
<span class="input-group-text">Line 1, Column 1</span>
<button class="btn btn-sm ml-auto shadow-none" type="button">Run <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg></button>
</span>
<span class="input-group-addon input-group-addon-block-start border-b">
<span class="input-group-text font-mono font-medium"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/></svg> script.js</span>
<button class="btn btn-ghost btn-xs btn-icon ml-auto" type="button" aria-label="Refresh"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg></button>
<button class="btn btn-ghost btn-xs btn-icon" type="button" aria-label="Copy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
</span>
</div>Custom control
Any element works as the control, like a textarea that autosizes with field-sizing-content.
RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="input-group-rtl-demo" class="grid w-full max-w-sm gap-6" dir="rtl">
<div class="input-group max-w-xs">
<input class="input" placeholder="بحث..." data-i18n-placeholder="placeholder" />
<span class="input-group-addon"><svg class="text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
<span class="input-group-addon input-group-addon-end" data-i18n="results">١٢ نتيجة</span>
</div>
<div class="input-group">
<input class="input" placeholder="جاري البحث..." data-i18n-placeholder="searching" />
<span class="input-group-addon input-group-addon-end"><svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg></span>
</div>
<div class="input-group">
<input class="input" placeholder="جاري حفظ التغييرات..." data-i18n-placeholder="savingChanges" />
<span class="input-group-addon input-group-addon-end">
<span class="input-group-text" data-i18n="saving">جاري الحفظ...</span>
<svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</span>
</div>
<div class="field-group max-w-sm">
<div class="field">
<label class="label" for="ig-rtl-textarea" data-i18n="textareaLabel">منطقة النص</label>
<div class="input-group">
<textarea class="textarea" id="ig-rtl-textarea" placeholder="اكتب تعليقًا..." data-i18n-placeholder="textareaPlaceholder"></textarea>
<span class="input-group-addon input-group-addon-block-end">
<span class="input-group-text" data-i18n="characterCount">٠/٢٨٠</span>
<button class="btn btn-sm ms-auto shadow-none" type="button" data-i18n="post">نشر</button>
</span>
</div>
<p class="field-description" data-i18n="textareaDescription">تذييل موضع أسفل منطقة النص.</p>
</div>
</div>
</div>
<script>
const translations = {
ar: { dir: "rtl", placeholder: "بحث...", results: "١٢ نتيجة", searching: "جاري البحث...", saving: "جاري الحفظ...", savingChanges: "جاري حفظ التغييرات...", textareaLabel: "منطقة النص", textareaPlaceholder: "اكتب تعليقًا...", characterCount: "٠/٢٨٠", post: "نشر", textareaDescription: "تذييل موضع أسفل منطقة النص." },
he: { dir: "rtl", placeholder: "חפש...", results: "12 תוצאות", searching: "מחפש...", saving: "שומר...", savingChanges: "שומר שינויים...", textareaLabel: "אזור טקסט", textareaPlaceholder: "כתוב תגובה...", characterCount: "0/280", post: "פרסם", textareaDescription: "כותרת תחתונה ממוקמת מתחת לאזור הטקסט." },
en: { dir: "ltr", placeholder: "Search...", results: "12 results", searching: "Searching...", saving: "Saving...", savingChanges: "Saving changes...", textareaLabel: "Textarea", textareaPlaceholder: "Write a comment...", characterCount: "0/280", post: "Post", textareaDescription: "Footer positioned below the textarea." },
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("input-group-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
el.placeholder = t[el.dataset.i18nPlaceholder];
});
});
</script>