# Input Group

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="grid w-full max-w-sm gap-6"> <InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> <InputGroupAddon align="inline-end">{"12 results"}</InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="example.com" /> <InputGroupAddon> <InputGroupText>{"https://"}</InputGroupText> </InputGroupAddon> <InputGroupAddon align="inline-end"> <InputGroupButton size="xs">{"Check"}</InputGroupButton> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupTextarea placeholder="Ask, Search or Chat..." /> <InputGroupAddon align="block-end"> <InputGroupButton size="icon-xs" class="rounded-full"> <PlusIcon /> </InputGroupButton> <InputGroupButton variant="ghost">{"Auto"}</InputGroupButton> <InputGroupText class="ml-auto">{"52% used"}</InputGroupText> <Separator orientation="vertical" class="!h-4" /> <InputGroupButton size="icon-xs" variant="default" class="rounded-full"> <ArrowUpIcon /> <span class="sr-only">{"Send"}</span> </InputGroupButton> </InputGroupAddon> </InputGroup> </div>
</div>

```astro
---
---

<div class="grid w-full max-w-sm gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="example.com" />
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupButton size="xs">Check</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupTextarea placeholder="Ask, Search or Chat..." />
    <InputGroupAddon align="block-end">
      <InputGroupButton size="icon-xs" class="rounded-full">
        <PlusIcon />
      </InputGroupButton>
      <InputGroupButton variant="ghost">Auto</InputGroupButton>
      <InputGroupText class="ml-auto">52% used</InputGroupText>
      <Separator orientation="vertical" class="!h-4" />
      <InputGroupButton size="icon-xs" variant="default" class="rounded-full">
        <ArrowUpIcon />
        <span class="sr-only">Send</span>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add input-group
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add input-group
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add input-group
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add input-group
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

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

## Props

| Prop | Type | Default |
|---|---|---|
| <code>size</code> | `"sm" \| "default" \| "lg"` | `"default"` |
| <code>class</code> | `string` | `""` |

## Examples

### Sizes

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="grid w-full max-w-sm gap-3"> <InputGroup size="sm"> <InputGroupInput placeholder="Small (h-8)" /> </InputGroup> <InputGroup> <InputGroupInput placeholder="Default (h-9)" /> </InputGroup> <InputGroup size="lg"> <InputGroupInput placeholder="Large (h-10)" /> </InputGroup> </div>
</div>

```astro
---
---

<div class="grid w-full max-w-sm gap-3">
  <InputGroup size="sm">
    <InputGroupInput placeholder="Small (h-8)" />
  </InputGroup>
  <InputGroup>
    <InputGroupInput placeholder="Default (h-9)" />
  </InputGroup>
  <InputGroup size="lg">
    <InputGroupInput placeholder="Large (h-10)" />
  </InputGroup>
</div>
```

## API Reference

| Prop | Type | Default |
| --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |