STRATA

Components / Input Group

Input Group

An input with something attached: a leading icon, a text prefix, an inline button. One bordered group instead of an input plus floating decorations.

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from '@layers/ui/input-group'

Rendered stock

House rules

  • Custom size prop: "default" is 36px, "sm" is 32px. Toolbar instances use size="sm" like every toolbar control.
  • Addons position via align: "inline-start", "inline-end", "block-start", or "block-end". Clicking an addon focuses the input.
  • Buttons inside the group are InputGroupButton (ghost, compact sizes), icon-only with an aria-label; plain text is InputGroupText.
  • ComboboxInput and CommandInput are already built on InputGroup; reach for those instead of recomposing search inputs.