Input Group
An input with inline adornments (icons, units, or text) where the group carries the border and focus state.
Usage
InputGroup carries the border, focus, and invalid styling; the input inside
is borderless (InputGroupInput renders Input variant="none"). Addons sit
inline before or after the input and focus it on click. Compose inside a
Field for the label and a11y wiring.
Inside a labelPosition="inset" field the Field shell carries the box
instead: the group drops its own chrome and keeps only the classic accent
underline.
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupText,
} from '@epilot/spark-ui/input-group'<InputGroup>
<InputGroupInput aria-label="Search" placeholder="Search devices" />
<InputGroupAddon align="inline-end">
<InputGroupText>kW</InputGroupText>
</InputGroupAddon>
</InputGroup>An InputGroupInput without a visible FieldLabel needs an aria-label
(translated by your app). For every combination and state side by side, see
the Field Matrix.
Examples
Search bar
A label-less group inside a Field gives the filled search-bar shell;
border-b-transparent hides the underline. Without a visible label, the
input needs an aria-label (translated by your app).
API Reference
| Component | Renders | Notes |
|---|---|---|
InputGroup | <div> | carries border/focus/invalid; follows the enclosing Field |
InputGroupInput | Input | borderless (variant="none"); all Input props |
InputGroupAddon | <div> | align: "inline-start" (default) | "inline-end"; focuses the input on click |
InputGroupText | <span> | muted text/icon styling for addon content |