# `LineaUI.Components.InputGroup`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/input_group.ex#L1)

Joins inputs, addons, selects and buttons into one row with shared borders, as LineOne's
input groups do. Only the outer ends keep their rounded corners.

    <.input_group>
      <.input_group_addon>@</.input_group_addon>
      <.input name="username" placeholder="Username" />
    </.input_group>

    <.input_group label="Price">
      <.input_group_addon variant="filled">$</.input_group_addon>
      <.input name="price" placeholder="Enter price" />
      <.input_group_addon variant="filled">.00</.input_group_addon>
    </.input_group>

    <.input_group shape="pill">
      <select class="form-select …">…</select>
      <.input name="price" placeholder="Price" />
      <.button>Purchase</.button>
    </.input_group>

# `input_group`

Renders the row. `label` adds a caption above it.

## Attributes

* `shape` (`:string`) - Defaults to `"rounded"`. Must be one of `"rounded"`, or `"pill"`.
* `label` (`:string`) - The caption. Defaults to `nil`.
* `label_class` (`:any`) - Classes of the caption text. Defaults to `nil`.
* `wrapper_class` (`:any`) - Classes of the outer block (grid placement, spacing). Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `input_group_addon`

A text or icon box at either end (or between the inputs) of an `input_group`.

## Attributes

* `variant` (`:string`) - Defaults to `"outline"`. Must be one of `"outline"`, or `"filled"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*