@thebase/ui/docs/components/input-group.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Input Group

## Pure Owl component

```js
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@thebase/ui";
```

```base-ui
<div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
  <InputGroup>
    <InputGroupInput placeholder="'Search...'"/>
    <InputGroupAddon align="'inline-end'">
      <Icon name="'search'"/>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupInput placeholder="'https://'"/>
    <InputGroupAddon align="'inline-end'">
      <InputGroupButton>Search</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>

  <InputGroup>
    <InputGroupTextarea placeholder="'Enter message...'" rows="3"/>
    <InputGroupAddon align="'block-end'">
      <InputGroupText>0/280</InputGroupText>
      <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `InputGroup` | `className` | `String` | optional |
| `InputGroupAddon` | `align` | `String` | `inline-start` (default), `inline-end`, `block-start`, `block-end` |
| `InputGroupButton` | `variant` | `String` | `default`, `destructive`, `outline`, `secondary`, `ghost` (default), `link` |
| `InputGroupButton` | `size` | `String` | `xs` (default), `icon-xs`, `sm`, `icon-sm` |
| `InputGroupText` | `className` | `String` | optional |
| `InputGroupInput` | `type`, `value`, `placeholder`, `disabled`, `readonly`, `invalid` | mixed | input control |
| `InputGroupTextarea` | `value`, `placeholder`, `rows`, `disabled`, `readonly`, `invalid`, `resize` | mixed | textarea control |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<div b-ui="input-group">
  <div b-input-group-addon b-att-align="inline-start">
    <span b-input-group-text>@</span>
  </div>
  <input b-ui="input" placeholder="username">
</div>
```

Use `b-att-align="inline-start|inline-end|block-start|block-end"` on `b-input-group-addon`.
Use `b-input-group-button` with `b-att-size="xs|icon-xs|sm|icon-sm"` and
`b-att-variant="default|destructive|outline|secondary|ghost|link"` for embedded actions.