Input Group

12 results

InstallTerminal

npm install @a3s-lab/ui@0.2.0

<div class="input-group">
  <input type="text" aria-label="Search" placeholder="Search..." />
  <span data-align="start" aria-hidden="true"> <!-- icon --></span>
  <span data-align="end">12 results</span>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Input Group component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your input group HTML

<div class="input-group">
  <input type="text" aria-label="Search" placeholder="Search..." />
  <span data-align="start" aria-hidden="true"> <!-- icon --></span>
  <span data-align="end">12 results</span>
</div>

Add class="input-group" to the root. Native controls stay semantic and become borderless children inside that shell.

<div class="input-group">

The root shell. Add role="group" and an accessible label only when the group itself needs to be named.

<input>, <textarea>, <select>: The native control. Use aria-invalid="true" for invalid state and disabled for disabled state.
<span>, <svg>, <kbd>: Decorative or helper content. Use aria-hidden="true" for decorative icons.
<button>, <div role="group">: Interactive actions. Use role="group" with an accessible label when multiple related actions share one side of the input.
<header>, <footer>: Header or footer addon rows for vertically oriented input groups.
data-align="start|end": Optional visual placement. Values use logical direction, so start/end automatically flip in RTL. Use data-orientation="vertical" on the root for header/footer layouts.
[data-control]: Escape hatch for custom controls that are not native input, textarea, or select.

Examples

Use data-align="start|end" on addon wrappers to position them inline. Use data-orientation="vertical" with header or footer for block placement.

Inline start

Input

Icon positioned at the start.

<div class="field">
  <label for="inline-start-input">Input</label>
  <div class="input-group">
    <input id="inline-start-input" type="text" placeholder="Search..." />
    <span role="group" data-align="start" aria-hidden="true"><svg class="text-muted-foreground lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>Icon positioned at the start.</p>
</div>

Inline end

Input

Icon positioned at the end.

<div class="field">
  <label for="inline-end-input">Input</label>
  <div class="input-group">
    <input id="inline-end-input" type="password" placeholder="Enter password" />
    <span role="group" data-align="end" aria-hidden="true"><svg class="lucide lucide-eye-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>Icon positioned at the end.</p>
</div>

Block start

Input

Full Name

Header positioned above the input.

Textarea

script.js

Header positioned above the textarea.

<div role="group" aria-label="Block start input group examples" class="fieldset">
  <div class="field">
    <label for="block-start-input">Input</label>
    <div class="input-group" data-orientation="vertical">
      <input id="block-start-input" type="text" placeholder="Enter your name" />
      <header data-align="start">
        <span>Full Name</span>
      </header>
    </div>
    <p>Header positioned above the input.</p>
  </div>
  <div class="field">
    <label for="block-start-textarea">Textarea</label>
    <div class="input-group" data-orientation="vertical">
      <textarea id="block-start-textarea" class="font-mono text-sm" placeholder="console.log('Hello, world!');"></textarea>
      <header data-align="start"><svg class="text-muted-foreground lucide lucide-file-code" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="font-mono">script.js</span>
        <button type="button" class="btn ml-auto size-6" data-variant="ghost" data-size="icon-sm" aria-label="Copy"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
      </header>
    </div>
    <p>Header positioned above the textarea.</p>
  </div>
</div>

Block end

Input

Footer positioned below the input.

Textarea

Footer positioned below the textarea.

<div role="group" aria-label="Block end input group examples" class="fieldset">
  <div class="field">
    <label for="block-end-input">Input</label>
    <div class="input-group" data-orientation="vertical">
      <input id="block-end-input" type="text" placeholder="Enter amount" />
      <footer data-align="end">
        <span>USD</span>
      </footer>
    </div>
    <p>Footer positioned below the input.</p>
  </div>
  <div class="field">
    <label for="block-end-textarea">Textarea</label>
    <div class="input-group" data-orientation="vertical">
      <textarea id="block-end-textarea" placeholder="Write a comment..."></textarea>
      <footer data-align="end">
        <span>0/280</span>
        <button type="button" class="btn ml-auto" data-size="sm">Post</button>
      </footer>
    </div>
    <p>Footer positioned below the textarea.</p>
  </div>
</div>

Icon

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="Search" placeholder="Search..." />
    <span data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="email" aria-label="Email address" placeholder="Enter your email" />
    <span data-align="start" aria-hidden="true"><svg class="lucide lucide-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="Card number" placeholder="Card number" />
    <span data-align="start" aria-hidden="true"><svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 data-align="end" aria-hidden="true"><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="Card number" placeholder="Card number" />
    <span data-align="end" aria-hidden="true"><svg class="lucide lucide-star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

Text

$USD

https://.com

@company.com

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="Amount" placeholder="0.00" />
    <span data-align="start">$</span>
    <span data-align="end">USD</span>
  </div>
  <div class="input-group">
    <input type="text" aria-label="Domain name" placeholder="example.com" />
    <span data-align="start">https://</span>
    <span data-align="end">.com</span>
  </div>
  <div class="input-group">
    <input type="text" aria-label="Username" placeholder="Enter your username" />
    <span data-align="end">@company.com</span>
  </div>
  <div class="input-group" data-orientation="vertical">
    <textarea aria-label="Message" placeholder="Enter your message"></textarea>
    <footer data-align="end">
      <span class="text-xs text-muted-foreground">120 characters left</span>
    </footer>
  </div>
</div>

Button

https://

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="Profile URL" readonly placeholder="https://x.com/shadcn" />
    <button type="button" class="btn" data-variant="ghost" data-size="icon-xs" data-align="end" aria-label="Copy" title="Copy"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
  </div>
  <div class="input-group [--radius:9999px]">
    <button type="button" class="btn" data-variant="secondary" data-size="icon-xs" data-align="start" aria-label="Connection information"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 data-align="start" class="text-muted-foreground">https://</span>
    <input type="text" id="input-secure-19" aria-label="Secure URL" />
    <button type="button" class="btn" data-variant="ghost" data-size="icon-xs" data-align="end" aria-label="Favorite"><svg class="lucide lucide-star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
  </div>
  <div class="input-group">
    <input type="text" aria-label="Search" placeholder="Type to search..." />
    <button type="button" class="btn" data-size="xs" data-variant="secondary" data-align="end">Search</button>
  </div>
</div>

Kbd

⌘K

<div class="input-group">
  <input type="text" aria-label="Search" placeholder="Search..." />
  <span data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 data-align="end"><kbd class="kbd">⌘K</kbd></span>
</div>

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="File name" placeholder="Enter file name" />
    <div id="dropdown-menu-601971" class="dropdown-menu" data-align="end">
      <button type="button" id="dropdown-menu-601971-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-601971-menu" aria-expanded="false" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="Open file actions"><svg class="lucide lucide-ellipsis" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
      <div id="dropdown-menu-601971-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32">
        <div role="menu" id="dropdown-menu-601971-menu" aria-labelledby="dropdown-menu-601971-trigger">
          <div id="dropdown-menu-601971-items-1" role="menuitem">Settings</div>
          <div id="dropdown-menu-601971-items-2" role="menuitem">Copy path</div>
          <div id="dropdown-menu-601971-items-3" role="menuitem">Open location</div>
        </div>
      </div>
    </div>
  </div>
  <div class="input-group [--radius:1rem]">
    <input type="text" aria-label="Search query" placeholder="Enter search query" />
    <div id="dropdown-menu-689868" class="dropdown-menu" data-align="end">
      <button type="button" id="dropdown-menu-689868-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-689868-menu" aria-expanded="false" class="btn pr-1.5! text-xs" data-variant="ghost" data-size="xs">
        Search In...
        <svg class="size-3 lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
      <div id="dropdown-menu-689868-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32 [--radius:0.95rem]">
        <div role="menu" id="dropdown-menu-689868-menu" aria-labelledby="dropdown-menu-689868-trigger">
          <div id="dropdown-menu-689868-items-1" role="menuitem">Documentation</div>
          <div id="dropdown-menu-689868-items-2" role="menuitem">Blog Posts</div>
          <div id="dropdown-menu-689868-items-3" role="menuitem">Changelog</div>
        </div>
      </div>
    </div>
  </div>
</div>

Spinner

Saving...

Please wait...

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="Search status" placeholder="Searching..." />
    <span data-align="end"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="Processing status" placeholder="Processing..." />
    <span data-align="start"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="Save status" placeholder="Saving changes..." />
    <span data-align="end">
      Saving...
      <svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="Refresh status" placeholder="Refreshing data..." />
    <span data-align="start" aria-hidden="true"><svg class="animate-spin lucide lucide-loader" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 data-align="end" class="text-muted-foreground">Please wait...</span>
  </div>
</div>

Textarea

script.js

<div class="input-group min-h-[200px]" data-orientation="vertical">
  <textarea aria-label="Code editor" placeholder="console.log('Hello, world!');"></textarea>
  <footer data-align="end" class="border-t">
    <span>Line 1, Column 1</span>
    <button type="button" class="btn ml-auto" data-size="sm">
      Run
      <svg class="lucide lucide-corner-down-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
  </footer>
  <header data-align="start" class="border-b"><svg class="text-muted-foreground lucide lucide-file-code" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>script.js</span>
    <div role="group" aria-label="File actions" class="ml-auto flex gap-1">
      <button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="Refresh file"><svg class="lucide lucide-refresh-ccw" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path d="M16 16h5v5" /></svg></button>
      <button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="Copy file"><svg class="lucide lucide-copy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
    </div>
  </header>
</div>

Custom input

<div class="input-group" data-orientation="vertical">
  <textarea data-control aria-label="Message" placeholder="Autoresize textarea..." class="field-sizing-content min-h-16 resize-none"></textarea>
  <footer data-align="end">
    <button type="button" class="btn ml-auto" data-size="sm">Submit</button>
  </footer>
</div>

RTL

١٢ نتيجة

جاري الحفظ...

منطقة النص

تذييل موضع أسفل منطقة النص.

<div dir="rtl" class="grid gap-6">
  <div class="input-group">
    <input type="text" aria-label="بحث" placeholder="بحث..." />
    <span role="group" data-align="start" aria-hidden="true"><svg class="lucide lucide-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 role="group" data-align="end">١٢ نتيجة</span>
  </div>
  <div class="input-group">
    <input type="text" aria-label="حالة البحث" placeholder="جاري البحث..." />
    <span role="group" data-align="end"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 type="text" aria-label="حالة الحفظ" placeholder="جاري حفظ التغييرات..." />
    <span role="group" data-align="end">
      جاري الحفظ...
      <svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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">
    <label for="rtl-textarea">منطقة النص</label>
    <div class="input-group" data-orientation="vertical">
      <textarea id="rtl-textarea" placeholder="اكتب تعليقًا..."></textarea>
      <footer data-align="end">
        <span>٠/٢٨٠</span>
        <button type="button" class="btn ms-auto" data-size="sm">نشر</button>
      </footer>
    </div>
    <p>تذييل موضع أسفل منطقة النص.</p>
  </div>
</div>

#Input Group

#Usage

Include CSS

Add your input group HTML

#Examples

#Inline start

#Inline end

#Block start

#Block end

#Icon

#Text

#Button

#Kbd

#Dropdown

#Spinner

#Textarea

#Custom input

#RTL

Input Group

Usage

Examples

Inline start

Inline end

Block start

Block end

Icon

Text

Button

Kbd

Dropdown

Spinner

Textarea

Custom input

RTL