Starting Point
v0.25.0
Start typing to search...
Go to Page
escClose
Guides
IntroductionInstallationCustomizationHelpChangelog
Resources
AvatarsUnsplash Editor
Components
AccordionAvatarBadgeBreadcrumbButtonButton GroupCardCheckboxCollapsibleComboboxDialogDropdownFieldFormsInputInput GroupKbdLabelPaginationPopoverProgressRadio GroupScrollbarSelectSeparatorSheetSidebarSliderSwitchTableTabsTextareaToastTooltip
Examples
Cards

Input Group

The input group wraps an input or textarea in a single bordered field and lets icons, text, buttons, and whole toolbars sit inside it. For attaching full-size buttons next to a field, reach for the button group instead.

<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>
  <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 strips its border and takes over as the field chrome. Extras go in input-group-addon elements, and regular buttons inside an addon shrink to fit the field automatically. The wrapper draws the border, focus ring, and invalid state for the whole field.

ClassDescription
input-groupAdd to the wrapper; carries the border, focus ring, and invalid state
input-group-smAdd to input-group for a compact field
input-group-addonAdd to an element holding icons, text, or buttons (leading by default)
input-group-addon-endAdd to input-group-addon to trail the input
input-group-addon-block-startAdd to input-group-addon for a full-width header row
input-group-addon-block-endAdd to input-group-addon for a full-width footer row
input-group-textAdd to a <span> for muted static text inside an addon
<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">
  <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">
  <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">
  <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">
  <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>

Icon

Drop svgs straight into addons; they size themselves.

<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>

Text

Wrap static text in input-group-text for prefixes, suffixes, and counters.

<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>

Button

Put regular buttons in an addon and they shrink to fit the field; a popover or any other overlay can hang off them.

<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>

Keyboard hint

Trail the input with a kbd to hint a shortcut.

<div class="input-group">
  <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>

Dropdown

Hang a dropdown off an addon button.

<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>

Loading

Spin an icon in an addon while the field works.

<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>

Textarea

Full toolbars compose above and below a textarea with the block addons.

<div class="input-group">
  <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; our textarea autosizes natively via field-sizing-content.

<div class="input-group">
  <textarea class="textarea" placeholder="Autoresize textarea..."></textarea>
  <span class="input-group-addon input-group-addon-block-end">
    <button class="btn btn-sm ml-auto shadow-none" type="button">Submit</button>
  </span>
</div>