Input Group

A field with things tucked into it: ten group variants, eight inline addons and two block ones, all published separately so one group covers a search box, a...

Three components, twenty variants

Using the Input Group

How does it relate to Input?
It carries the same five states drawn the same way, so a group and a plain field sit in one form as equals: focus adds a 3px base.ring outside the border rather than replacing it, invalid takes the border to base.destructive, disabled is base.muted at 50%.
What does the Textarea type change?
The box goes from 373 × 32 to 373 × 104 and the row becomes a column that pushes its addon to the bottom edge. That strip is where the character count and the send button live, which is the source's block-end position.
Is the Align axis the same as the source's align prop?
No, and it is worth knowing. The source's align takes inline-start, inline-end, block-start and block-end, so block-start means above the field. The kit's Addon Block only draws the below case, and uses Start and End for where the content sits horizontally inside that strip.
Why are the addons separate components?
Because the thing tucked into a field varies far more than the field does. Eight inline variants and two block ones cover a tick, a search glyph, a text prefix, a shortcut key, a spinner, an icon button, an info target and a dropdown, without any of them multiplying the group's ten variants.
Which addons look pressable?
The ones that are. Kbd, Button and Dropdown carry a base.muted chip at radius.sm; the two icons, the spinner, the tick and the text prefix have no surface at all, because you do not click a currency symbol.