Design system

Input Group

A field with inline actions, prefixes, suffixes, or supporting text.

Use an input group when text or an action belongs directly to the value being edited. Keep the group focused on one input task.

Built on Workshop1 compositionUpstream API
Search
https://

No action selected

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@workshop1/ui/components/input-group"

Composition

Use InputGroupInput inside InputGroup and add InputGroupAddon before or after it. Set align="inline-end" for trailing content or block-start and block-end for multiline supporting content. Use InputGroupButton for the compact button sizing intended for an addon. InputGroup size="sm" is the 28px group that sits beside Input size="sm".

Accessibility

The input still needs a label. Give addon buttons their own accessible names, and keep decorative icons hidden from the accessible name when nearby text already explains them.

Best practices

  • Keep prefixes and suffixes short and unambiguous.
  • Use a standalone field when an addon does not clarify the value.
  • Keep inline actions reversible or confirm destructive actions before they run.