Input Group

Accessibility

• One input with decorations, not a fieldset.
• Icon Buttons inside have their own labels.

Motion

• The whole group lifts on focus. Addons stay put.
• The composer grows 22 px a line in 160 ms, up to six lines, then scrolls.
• With reduced motion, height jumps.

Responsive behavior

• 40 px inline on Web and 48 px on Mobile.

Performance

• No Motion. Focus and invalid are CSS on the shared ring.
• The composer measures its height in useLayoutEffect, so it never paints at the wrong height. It measures on every render, so keep its parent quiet.

• Import InputGroup, InputGroupInput, InputGroupTextarea, InputGroupText and InputGroupChip from @/components/fetaui/input-group.
• Use InputGroupInput, not Input, as the child. Input draws its own pill.
• start and end sit in the pill. blockStart and blockEnd add rows and turn it into a box.
• A click on the group focuses the entry unless it lands on a button or link. invalid and disabled go on the group and reach its input. The demo composer's Post and the copy buttons are not wired up.