Input Group

Usage

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

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search" />
</InputGroup>

InputGroupAddon takes align: inline-start (default), inline-end, block-start (above a textarea) or block-end (below it). InputGroupButton takes the Button variants and sizes xs, sm, icon-xs, icon-sm.

Guidelines

• Use InputGroupInput and InputGroupTextarea, not the plain Input, inside a group, so the focus ring wraps the whole group.
• A leading icon says what the field is for (search, link); it doesn't replace the label.
• Status inside the field (a check for "available") uses status tokens, not brand.
• For a button that sits outside the border, use Button Group.