Input Group
Inputs with leading/trailing add-ons.
InputGroup carries the border and focus ring; InputGroupInput (or the
textarea) renders transparently inside it, and InputGroupAddons hold
icons, text, or buttons at either end.
Installation
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from "@iammikz/srui";
Usage
👤
https://
⌘K
Exports
| Export | Notes |
|---|---|
InputGroup | The bordered shell; carries the focus-within ring and aria-invalid styling |
InputGroupAddon | End slot — align="start" | "end"; icons, text, buttons |
InputGroupInput / InputGroupTextarea | The transparent field |
InputGroupButton | Flush Button that stretches to the group height |
Accessibility
The group is role="group"; label the inner input (aria-label or a
Label htmlFor). Screen readers announce add-on text adjacent to the field.