Input Group

Add icons, text, buttons, and helper content to inputs and textareas.

12 results

https://

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" placeholder="Search..." />
    <span data-align="start" aria-hidden="true">
      <svg 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="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
    </span>
    <span data-align="end">12 results</span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="example.com" />
    <span data-align="start">https://</span>
    <button type="button" class="btn-xs-icon-ghost rounded-full" data-align="end" aria-label="Info">
      <svg 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>
  </div>

  <div class="input-group min-h-32" data-orientation="vertical">
    <textarea placeholder="Ask, Search or Chat..."></textarea>
    <footer data-align="end" role="group" aria-label="Message actions">
      <button type="button" class="btn-xs-icon-outline rounded-full" aria-label="Add attachment">
        <svg 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="M5 12h14" />
          <path d="M12 5v14" />
        </svg>
      </button>

      <div id="dropdown-menu-695569" class="dropdown-menu min-w-0">
        <button type="button" id="dropdown-menu-695569-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-695569-menu" aria-expanded="false" class="btn-xs-ghost">Auto</button>
        <div id="dropdown-menu-695569-popover" data-popover aria-hidden="true" data-side="top" data-align="start" class="min-w-28 [--radius:0.95rem]">
          <div role="menu" id="dropdown-menu-695569-menu" aria-labelledby="dropdown-menu-695569-trigger">
            <div id="dropdown-menu-695569-items-1" role="menuitem">Auto</div>

            <div id="dropdown-menu-695569-items-2" role="menuitem">Agent</div>

            <div id="dropdown-menu-695569-items-3" role="menuitem">Manual</div>
          </div>
        </div>
      </div>

      <span class="ms-auto">52% used</span>
      <hr role="separator" class="h-4" />
      <button type="button" class="btn-xs-icon rounded-full" disabled aria-label="Send">
        <svg 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="m5 12 7-7 7 7" />
          <path d="M12 19V5" />
        </svg>
      </button>
    </footer>
  </div>

  <div class="input-group">
    <input type="text" placeholder="@shadcn" />
    <span data-align="end" aria-hidden="true">
      <span class="flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground">
        <svg 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" class="size-3"><path d="M20 6 9 17l-5-5" /></svg>
      </span>
    </span>
  </div>
</div>

Usage

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

Use .input-group on the root. The group owns the visible shell. Native controls stay semantic and become borderless children inside that shell.

The component has the following HTML structure:

<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

Align

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 max-w-sm">
  <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 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" class="text-muted-foreground">
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
    </span>
  </div>
  <p>Icon positioned at the start.</p>
</div>

inline-end

Input

Icon positioned at the end.

<div class="field max-w-sm">
  <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 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 max-w-sm">
  <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 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" class="text-muted-foreground">
          <path d="M10 12.5 8 15l2 2.5" />
          <path d="m14 12.5 2 2.5-2 2.5" />
          <path d="M14 2v4a2 2 0 0 0 2 2h4" />
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
        </svg>
        <span class="font-mono">script.js</span>
        <button type="button" class="btn-xs-icon-ghost ml-auto" aria-label="Copy">
          <svg 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 max-w-sm">
  <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-sm ml-auto">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" placeholder="Search..." />
    <span data-align="start" aria-hidden="true">
      <svg 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="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
    </span>
  </div>

  <div class="input-group">
    <input type="email" placeholder="Enter your email" />
    <span data-align="start" aria-hidden="true">
      <svg 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="16" x="2" y="4" rx="2" />
        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
      </svg>
    </span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="Card number" />
    <span data-align="start" aria-hidden="true">
      <svg 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 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" placeholder="Card number" />
    <span data-align="end" aria-hidden="true">
      <svg 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 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" placeholder="0.00" />
    <span data-align="start">$</span>
    <span data-align="end">USD</span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="example.com" />
    <span data-align="start">https://</span>
    <span data-align="end">.com</span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="Enter your username" />
    <span data-align="end">@company.com</span>
  </div>

  <div class="input-group" data-orientation="vertical">
    <textarea 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" readonly placeholder="https://x.com/shadcn" />
    <button type="button" class="btn-xs-icon-ghost" data-align="end" aria-label="Copy" title="Copy">
      <svg 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-xs-icon-secondary" data-align="start" aria-label="Connection information">
      <svg 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" />
    <button type="button" class="btn-xs-icon-ghost" data-align="end" aria-label="Favorite">
      <svg 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" placeholder="Type to search..." />
    <button type="button" class="btn-secondary" data-align="end">Search</button>
  </div>
</div>

Kbd

⌘K

<div class="input-group">
  <input type="text" placeholder="Search..." />
  <span data-align="start" aria-hidden="true">
    <svg 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="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  </span>
  <kbd data-align="end">⌘K</kbd>
</div>

<div class="grid gap-6">
  <div class="input-group">
    <input type="text" placeholder="Enter file name" />

    <div id="dropdown-menu-623016" class="dropdown-menu" data-align="end">
      <button type="button" id="dropdown-menu-623016-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-623016-menu" aria-expanded="false" class="btn-xs-icon-ghost" aria-label="Open file actions">
        <svg 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-623016-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32">
        <div role="menu" id="dropdown-menu-623016-menu" aria-labelledby="dropdown-menu-623016-trigger">
          <div id="dropdown-menu-623016-items-1" role="menuitem">Settings</div>

          <div id="dropdown-menu-623016-items-2" role="menuitem">Copy path</div>

          <div id="dropdown-menu-623016-items-3" role="menuitem">Open location</div>
        </div>
      </div>
    </div>
  </div>

  <div class="input-group [--radius:1rem]">
    <input type="text" placeholder="Enter search query" />

    <div id="dropdown-menu-270444" class="dropdown-menu" data-align="end">
      <button type="button" id="dropdown-menu-270444-trigger" aria-haspopup="menu" aria-controls="dropdown-menu-270444-menu" aria-expanded="false" class="btn-xs-ghost pr-1.5! text-xs">
        Search In...
        <svg 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" class="size-3"><path d="m6 9 6 6 6-6" /></svg>
      </button>
      <div id="dropdown-menu-270444-popover" data-popover aria-hidden="true" data-align="end" class="min-w-32 [--radius:0.95rem]">
        <div role="menu" id="dropdown-menu-270444-menu" aria-labelledby="dropdown-menu-270444-trigger">
          <div id="dropdown-menu-270444-items-1" role="menuitem">Documentation</div>

          <div id="dropdown-menu-270444-items-2" role="menuitem">Blog Posts</div>

          <div id="dropdown-menu-270444-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" placeholder="Searching..." />
    <span data-align="end">
      <svg 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" role="status" aria-label="Loading" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    </span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="Processing..." />
    <span data-align="start">
      <svg 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" role="status" aria-label="Loading" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    </span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="Saving changes..." />
    <span data-align="end">
      Saving...
      <svg 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" role="status" aria-label="Loading" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    </span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="Refreshing data..." />
    <span data-align="start" aria-hidden="true">
      <svg 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" class="animate-spin">
        <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 placeholder="console.log('Hello, world!');"></textarea>
  <footer data-align="end" class="border-t">
    <span>Line 1, Column 1</span>
    <button type="button" class="btn-sm ml-auto">
      Run
      <svg 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">
        <polyline points="9 10 4 15 9 20" />
        <path d="M20 4v7a4 4 0 0 1-4 4H4" />
      </svg>
    </button>
  </footer>
  <header data-align="start" class="border-b">
    <svg 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" class="text-muted-foreground">
      <path d="M10 12.5 8 15l2 2.5" />
      <path d="m14 12.5 2 2.5-2 2.5" />
      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
    </svg>
    <span>script.js</span>
    <div role="group" aria-label="File actions" class="ml-auto flex gap-1">
      <button type="button" class="btn-xs-icon-ghost">
        <svg 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-xs-icon-ghost">
        <svg 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 placeholder="Autoresize textarea..." class="field-sizing-content min-h-16 resize-none"></textarea>
  <footer data-align="end">
    <button type="button" class="btn-sm ml-auto">Submit</button>
  </footer>
</div>

RTL

١٢ نتيجة

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

منطقة النص

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

<div dir="rtl" class="grid gap-6">
  <div class="input-group">
    <input type="text" placeholder="بحث..." />
    <span role="group" data-align="start" aria-hidden="true">
      <svg 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="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
    </span>
    <span role="group" data-align="end">١٢ نتيجة</span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="جاري البحث..." />
    <span role="group" data-align="end">
      <svg 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" role="status" aria-label="Loading" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    </span>
  </div>

  <div class="input-group">
    <input type="text" placeholder="جاري حفظ التغييرات..." />
    <span role="group" data-align="end">
      جاري الحفظ...
      <svg 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" role="status" aria-label="Loading" class="animate-spin"><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-sm ms-auto">نشر</button>
      </footer>
    </div>
    <p>تذييل موضع أسفل منطقة النص.</p>
  </div>
</div>