---
title: Input Group
url: "https://native-sdk.dev/docs/components/input-group"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `input-group` to combine a [textarea](/docs/components/textarea) and an accessory row inside one border. The group shows a focus ring when any child has focus and removes the textarea’s individual surface styling. The textarea retains its text bindings and input events. Set `submit-on-enter="true"` to submit on Enter, and `autofocus` to focus it when mounted.

## Markup

The textarea comes first (document order is focus order), then the optional `input-group-actions` row. Put a `spacer` between the leading and trailing controls; `if`/`else` inside the row swap send for stop while a run is streaming.

```html
<input-group label="Message composer" height="120">
  <textarea placeholder="Type a message" text="{draft}" submit-on-enter="true" on-input="draft_edited" on-submit="send" />
  <input-group-actions>
    <button icon="plus" variant="ghost" size="icon" on-press="attach" label="Attach"></button>
    <spacer grow="1" />
    <button icon="send" size="icon" on-press="send" label="Send"></button>
  </input-group-actions>
</input-group>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.inputGroup(.{
    .height = 120,
    .semantics = .{ .label = "Message composer" },
}, ui.el(.textarea, .{
    .placeholder = "Type a message",
    .text = model.draft,
    .submit_on_enter = true,
    .on_input = Ui.inputMsg(.draft_edited),
    .on_submit = .send,
    .semantics = .{ .label = "Message" },
}, .{}), ui.inputGroupActions(.{}, .{
    ui.el(.button, .{ .icon = "plus", .variant = .ghost, .size = .icon, .on_press = .attach, .semantics = .{ .label = "Attach" } }, .{}),
    ui.spacer(1),
    ui.el(.button, .{ .icon = "send", .size = .icon, .on_press = .send, .semantics = .{ .label = "Send" } }, .{}),
}))
```

## Attributes

| Attribute   | Description                                                                                                                              |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | Accessible name; the group announces as ONE named field (role group) while the entry and accessory controls stay individually reachable. |
| `width`     | Definite group width (plain number); 0/omitted sizes from the entry plus the actions row.                                                |
| `height`    | Definite group height (plain number); the entry grow-stretches to absorb it.                                                             |
| `min-width` | Width floor (plain number) without width's definite max.                                                                                 |
| `grow`      | Flex grow factor.                                                                                                                        |

### input-group-actions

| Attribute | Description                                                                            |
| --------- | -------------------------------------------------------------------------------------- |
| `gap`     | input-group-actions: spacing between the accessory controls (plain number; default 6). |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)