InputGroup

Markdown

One bordered control that holds an input and its action.

Use it for
An input with an attached action or affix, such as a search with a button or an amount with a currency.
Not for
Separate controls that only happen to sit together. Try Field.

InputGroup preview

Loading example…

Installation

npm install @stackunseen/ui
import { InputGroup } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Parts

One border around an input and what goes with it. Wrap it in Field for the label.

How the parts fit together

tsx
<Field label="Website">
  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <Input />
    <InputGroupButton type="submit">Check</InputGroupButton>
  </InputGroup>
</Field>

  1. InputGroup

    The shared border around the parts.

    Propsattach size shape invalid disabled

  2. InputGroupAddon

    A prefix or suffix such as an icon, a currency sign or a domain.

  3. Input

    The field itself, a normal Input.

    Built fromInput

  4. InputGroupButton

    The action at the end, such as Subscribe.

    Propsvariant size asChild href

Usage and props

The group draws the one border, radius and focus ring through :focus-within; the input gives up its own, and the button keeps an inner keyboard ring. Field supplies the label, description, error and disabled state; it works in a native form.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

attach?: flush | inset · size?: default | touch · shape?: control | pill · invalid? · disabled? · InputGroupAddon · InputGroupButton
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
attach?: flush | inset · size?: default | touch · shape?: control | pill · invalid? · disabled? · InputGroupAddon · InputGroupButton
Keeps honest
The group draws the one border, radius and focus ring through :focus-within; the input gives up its own, and the button keeps an inner keyboard ring. Field supplies the label, description, error and disabled state; it works in a native form.
MCP
read_component "InputGroup" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Tab moves from the input to the button; Enter in the input submits the form.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio