InputGroup

InputGroup

<InputGroup aria-label="Search" attached>
  <Select aria-label="Field">…</Select>
  <TextInput aria-label="Query" placeholder="Search…" />
  <Button>Go</Button>
</InputGroup>

Install: @helixui/core

import { InputGroup } from '@helixui/core'

status: stable · since: 0.1.0

Tags: composite, attached, input-row

Anatomy

[ prefix ][ input              ][ suffix ]
 └────── attached border (single radius) ───────┘

Layout

• display — inline-flex
• width — fill
• height — content
• intrinsicSize — fills width, hugs content height
• stackable — false
• fullBleed — false

Visual

A horizontal row of controls. With attached, children share a single rounded outer border and inner borders collapse, producing the classic “URL prefix + input + button” look.

Props

Name	Type	Default	Description
attached	boolean	false	Joins children with shared border (segmented look).
...rest	HTMLAttributes<HTMLDivElement>	—	Native div attributes.

Slots

• children — controls (TextInput, Button, IconButton, Select, etc.)

Tokens used

space.2, radius.md

Accessibility

Role: group

Notes

• Container is role=\"group\"; provide a aria-label describing the group’s purpose.

Composes with

Component	Relation	Note
TextInput	child	Most common middle child.
Button	child	Trailing action.
Select	child	Leading or trailing.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

URL field with copy button

“attached input + button row”

<InputGroup attached>
  <TextInput value={url} readOnly />
  <Button onPress={copy}>Copy</Button>
</InputGroup>

Related

• TextInput