Astro Input Group Component

12 results

---
import SearchIcon from "@lucide/astro/icons/search"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
---

<InputGroup class="max-w-xs">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>

Installation

npx shadcn@latest add @fulldev/input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Composition

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Align

Place InputGroupAddon after InputGroupInput or InputGroupTextarea in the DOM for correct focus order, then use its align prop to position it visually. Clicking an addon outside a button or link focuses the control.

inline-start

Use align="inline-start" to position the addon at the start of the input. This is the default.

---
import SearchIcon from "@lucide/astro/icons/search"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
---

<Field class="max-w-sm">
  <FieldLabel for="inline-start-input">Input</FieldLabel>
  <InputGroup>
    <InputGroupInput id="inline-start-input" placeholder="Search..." />
    <InputGroupAddon align="inline-start">
      <SearchIcon class="text-muted-foreground" />
    </InputGroupAddon>
  </InputGroup>
  <FieldDescription>Icon positioned at the start.</FieldDescription>
</Field>

inline-end

Use align="inline-end" to position the addon at the end of the input.

---
import EyeOffIcon from "@lucide/astro/icons/eye-off"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
---

<Field class="max-w-sm">
  <FieldLabel for="inline-end-input">Input</FieldLabel>
  <InputGroup>
    <InputGroupInput
      id="inline-end-input"
      type="password"
      placeholder="Enter password"
    />
    <InputGroupAddon align="inline-end">
      <EyeOffIcon />
    </InputGroupAddon>
  </InputGroup>
  <FieldDescription>Icon positioned at the end.</FieldDescription>
</Field>

block-start

Use align="block-start" to position the addon above the input.

---
import CopyIcon from "@lucide/astro/icons/copy"
import FileCodeIcon from "@lucide/astro/icons/file-code"

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
---

<FieldGroup class="max-w-sm">
  <Field>
    <FieldLabel for="block-start-input">Input</FieldLabel>
    <InputGroup class="h-auto">
      <InputGroupInput id="block-start-input" placeholder="Enter your name" />
      <InputGroupAddon align="block-start">
        <InputGroupText>Full Name</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Header positioned above the input.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel for="block-start-textarea">Textarea</FieldLabel>
    <InputGroup>
      <InputGroupTextarea
        id="block-start-textarea"
        placeholder="console.log('Hello, world!');"
        class="font-mono text-sm"
      />
      <InputGroupAddon align="block-start">
        <FileCodeIcon class="text-muted-foreground" />
        <InputGroupText class="font-mono">script.js</InputGroupText>
        <InputGroupButton size="icon-xs" class="ml-auto">
          <CopyIcon />
          <span class="sr-only">Copy</span>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Header positioned above the textarea.</FieldDescription>
  </Field>
</FieldGroup>

block-end

Use align="block-end" to position the addon below the input.

---
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
---

<FieldGroup class="max-w-sm">
  <Field>
    <FieldLabel for="block-end-input">Input</FieldLabel>
    <InputGroup class="h-auto">
      <InputGroupInput id="block-end-input" placeholder="Enter amount" />
      <InputGroupAddon align="block-end">
        <InputGroupText>USD</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Footer positioned below the input.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel for="block-end-textarea">Textarea</FieldLabel>
    <InputGroup>
      <InputGroupTextarea
        id="block-end-textarea"
        placeholder="Write a comment..."
      />
      <InputGroupAddon align="block-end">
        <InputGroupText>0/280</InputGroupText>
        <InputGroupButton variant="default" size="sm" class="ml-auto">
          Post
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Footer positioned below the textarea.</FieldDescription>
  </Field>
</FieldGroup>

Icon

---
import CheckIcon from "@lucide/astro/icons/check"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import InfoIcon from "@lucide/astro/icons/info"
import MailIcon from "@lucide/astro/icons/mail"
import SearchIcon from "@lucide/astro/icons/search"
import StarIcon from "@lucide/astro/icons/star"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
---

<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput type="email" placeholder="Enter your email" />
    <InputGroupAddon>
      <MailIcon />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Card number" />
    <InputGroupAddon>
      <CreditCardIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <CheckIcon />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Card number" />
    <InputGroupAddon align="inline-end">
      <StarIcon />
      <InfoIcon />
    </InputGroupAddon>
  </InputGroup>
</div>

Text

USD

https://

.com

@company.com

120 characters left

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
---

<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <InputGroupAddon>
      <InputGroupText>$</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput placeholder="0.00" />
    <InputGroupAddon align="inline-end">
      <InputGroupText>USD</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput placeholder="example.com" class="pl-0.5!" />
    <InputGroupAddon align="inline-end">
      <InputGroupText>.com</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Enter your username" />
    <InputGroupAddon align="inline-end">
      <InputGroupText>@company.com</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupTextarea placeholder="Enter your message" />
    <InputGroupAddon align="block-end">
      <InputGroupText class="text-xs text-muted-foreground">
        120 characters left
      </InputGroupText>
    </InputGroupAddon>
  </InputGroup>
</div>

Button

To open a popover or dropdown menu from an InputGroupButton, put the root inside the addon and give the button the trigger slot, such as data-slot="popover-trigger".

https://

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Popover, PopoverContent } from "@/components/ui/popover"
---

<div class="grid w-full max-w-sm gap-6" data-input-group-button-example>
  <InputGroup>
    <InputGroupInput placeholder="https://x.com/shadcn" readonly />
    <InputGroupAddon align="inline-end">
      <InputGroupButton
        aria-label="Copy"
        title="Copy"
        size="icon-xs"
        data-copy-value="https://x.com/shadcn"
      >
        <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="tabler-icon tabler-icon-check hidden"
          data-copied-icon
        >
          <path d="M5 12l5 5l10 -10"></path>
        </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"
          class="tabler-icon tabler-icon-copy"
          data-copy-icon
        >
          <path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"></path>
          <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path>
        </svg>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup class="[--radius:9999px]">
    <InputGroupAddon>
      <Popover>
        <InputGroupButton
          data-slot="popover-trigger"
          variant="secondary"
          size="icon-xs"
          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"
            class="tabler-icon tabler-icon-info-circle"
          >
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
            <path d="M12 9h.01"></path>
            <path d="M11 12h1v4h1"></path>
          </svg>
        </InputGroupButton>
        <PopoverContent
          align="start"
          class="flex flex-col gap-1 rounded-xl text-sm"
        >
          <p class="font-medium">Your connection is not secure.</p>
          <p>You should not enter any sensitive information on this site.</p>
        </PopoverContent>
      </Popover>
    </InputGroupAddon>
    <InputGroupAddon class="pl-1.5 text-muted-foreground">
      https://
    </InputGroupAddon>
    <InputGroupInput id="input-secure-19" />
    <InputGroupAddon align="inline-end">
      <InputGroupButton
        size="icon-xs"
        aria-label="Favorite"
        data-favorite-toggle
      >
        <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="tabler-icon tabler-icon-star data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600"
          data-favorite="false"
        >
          <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"></path>
        </svg>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Type to search..." />
    <InputGroupAddon align="inline-end">
      <InputGroupButton variant="secondary">Search</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

<script>
  const initialize = () => {
    for (const root of document.querySelectorAll<HTMLElement>(
      "[data-input-group-button-example]"
    )) {
      if (root.hasAttribute("data-bound")) continue
      root.setAttribute("data-bound", "")

      const copy = root.querySelector<HTMLElement>("[data-copy-value]")!
      const copyIcon = copy.querySelector("[data-copy-icon]")!
      const copiedIcon = copy.querySelector("[data-copied-icon]")!
      let timeout: ReturnType<typeof setTimeout> | undefined
      const setCopied = (copied: boolean) => {
        copiedIcon.classList.toggle("hidden", !copied)
        copyIcon.classList.toggle("hidden", copied)
      }
      copy.addEventListener("click", async () => {
        try {
          await navigator.clipboard.writeText(copy.dataset.copyValue!)
        } catch {
          return
        }
        setCopied(true)
        clearTimeout(timeout)
        timeout = setTimeout(() => setCopied(false), 2000)
      })

      const favorite = root.querySelector("[data-favorite-toggle]")!
      const star = favorite.querySelector<SVGElement>("[data-favorite]")!
      favorite.addEventListener("click", () => {
        star.dataset.favorite = String(star.dataset.favorite !== "true")
      })
    }
  }

  initialize()
  document.addEventListener("astro:page-load", initialize)
</script>

Kbd

⌘K

---
import SearchIcon from "@lucide/astro/icons/search"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
---

<InputGroup class="max-w-sm">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon class="text-muted-foreground" />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
import MoreHorizontal from "@lucide/astro/icons/ellipsis"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
---

<div class="grid w-full max-w-sm gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Enter file name" />
    <InputGroupAddon align="inline-end">
      <DropdownMenu>
        <InputGroupButton
          data-slot="dropdown-menu-trigger"
          variant="ghost"
          aria-label="More"
          size="icon-xs"
        >
          <MoreHorizontal />
        </InputGroupButton>
        <DropdownMenuContent align="end" sideOffset={8} alignOffset={-4}>
          <DropdownMenuGroup>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuItem>Copy path</DropdownMenuItem>
            <DropdownMenuItem>Open location</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Enter search query" />
    <InputGroupAddon align="inline-end">
      <DropdownMenu>
        <InputGroupButton
          data-slot="dropdown-menu-trigger"
          variant="ghost"
          class="pr-1.5! text-xs"
        >
          Search In... <ChevronDownIcon class="size-3" />
        </InputGroupButton>
        <DropdownMenuContent align="end" sideOffset={8} alignOffset={-4}>
          <DropdownMenuGroup>
            <DropdownMenuItem>Documentation</DropdownMenuItem>
            <DropdownMenuItem>Blog Posts</DropdownMenuItem>
            <DropdownMenuItem>Changelog</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </InputGroupAddon>
  </InputGroup>
</div>

Spinner

Saving...

Please wait...

---
import LoaderIcon from "@lucide/astro/icons/loader"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { Spinner } from "@/components/ui/spinner"
---

<div class="grid w-full max-w-sm gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Searching..." />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Processing..." />
    <InputGroupAddon>
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Saving changes..." />
    <InputGroupAddon align="inline-end">
      <InputGroupText>Saving...</InputGroupText>
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Refreshing data..." />
    <InputGroupAddon>
      <LoaderIcon class="animate-spin" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupText class="text-muted-foreground">
        Please wait...
      </InputGroupText>
    </InputGroupAddon>
  </InputGroup>
</div>

Textarea

Line 1, Column 1

script.js

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
---

<div class="grid w-full max-w-md gap-4">
  <InputGroup>
    <InputGroupTextarea
      id="textarea-code-32"
      placeholder="console.log('Hello, world!');"
      class="min-h-[200px]"
    />
    <InputGroupAddon align="block-end" class="border-t">
      <InputGroupText>Line 1, Column 1</InputGroupText>
      <InputGroupButton size="sm" class="ml-auto" variant="default">
        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"
          class="tabler-icon tabler-icon-corner-down-left"
        >
          <path d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"></path>
        </svg>
      </InputGroupButton>
    </InputGroupAddon>
    <InputGroupAddon align="block-start" class="border-b">
      <InputGroupText class="font-mono font-medium">
        <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="tabler-icon tabler-icon-brand-javascript"
        >
          <path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5l16 0"></path>
          <path d="M7.5 8h3v8l-2 -1"></path>
          <path d="M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5"></path>
        </svg>
        script.js
      </InputGroupText>
      <InputGroupButton class="ml-auto" size="icon-xs" aria-label="Refresh">
        <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="tabler-icon tabler-icon-refresh"
        >
          <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
          <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
        </svg>
      </InputGroupButton>
      <InputGroupButton variant="ghost" size="icon-xs" 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"
          class="tabler-icon tabler-icon-copy"
        >
          <path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"></path>
          <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path>
        </svg>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

Custom Input

Add data-slot="input-group-control" to a custom control for the focus state and addon click handling. This one grows with its content through field-sizing-content.

---
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
} from "@/components/ui/input-group"
---

<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <textarea
      data-slot="input-group-control"
      class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
      placeholder="Autoresize textarea..."
    ></textarea>
    <InputGroupAddon align="block-end">
      <InputGroupButton class="ml-auto" size="sm" variant="default">
        Submit
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

RTL

١٢ نتيجة

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

---
import SearchIcon from "@lucide/astro/icons/search"

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
import { Spinner } from "@/components/ui/spinner"

const translations = {
  en: {
    dir: "ltr",
    values: {
      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.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      placeholder: "بحث...",
      results: "١٢ نتيجة",
      searching: "جاري البحث...",
      saving: "جاري الحفظ...",
      savingChanges: "جاري حفظ التغييرات...",
      textareaLabel: "منطقة النص",
      textareaPlaceholder: "اكتب تعليقًا...",
      characterCount: "٠/٢٨٠",
      post: "نشر",
      textareaDescription: "تذييل موضع أسفل منطقة النص.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      placeholder: "חפש...",
      results: "12 תוצאות",
      searching: "מחפש...",
      saving: "שומר...",
      savingChanges: "שומר שינויים...",
      textareaLabel: "אזור טקסט",
      textareaPlaceholder: "כתוב תגובה...",
      characterCount: "0/280",
      post: "פרסם",
      textareaDescription: "כותרת תחתונה ממוקמת מתחת לאזור הטקסט.",
    },
  },
}

const { dir, values: t } = translations.ar
---

<div class="grid w-full max-w-sm gap-6" dir={dir}>
  <InputGroup class="max-w-xs">
    <InputGroupInput placeholder={t.placeholder} />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder={t.searching} />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder={t.savingChanges} />
    <InputGroupAddon align="inline-end">
      <InputGroupText>{t.saving}</InputGroupText>
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <FieldGroup class="max-w-sm">
    <Field>
      <FieldLabel for="rtl-textarea">{t.textareaLabel}</FieldLabel>
      <InputGroup>
        <InputGroupTextarea
          id="rtl-textarea"
          placeholder={t.textareaPlaceholder}
        />
        <InputGroupAddon align="block-end">
          <InputGroupText>{t.characterCount}</InputGroupText>
          <InputGroupButton variant="default" size="sm" class="ms-auto">
            {t.post}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <FieldDescription>{t.textareaDescription}</FieldDescription>
    </Field>
  </FieldGroup>
</div>

API Reference

Source: src/components/ui/input-group

InputGroupAddon

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`

Use inline-start or inline-end with InputGroupInput, and block-start or block-end with InputGroupTextarea. An addon can hold several buttons, icons and texts.

InputGroupButton

Prop	Type	Default
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`type`	`"button" \| "submit" \| "reset"`	`"button"`

With href, it renders a link.

InputGroupInput and InputGroupTextarea

Replacements for Input and Textarea inside an input group. They pass all other attributes to the underlying control and set data-slot="input-group-control".