Input Group

A field composition pattern for prepend text, append text, and appended buttons. The visual shell is shared, but the input remains a native text field.

Demo on CodePen

Preview

Browser Compatibility

Feature	Chrome	Edge	Firefox	Safari	Notes	Source
`flexbox` Broad support	Yes	Yes	Yes	Yes	The input group layout uses only flexbox and native controls.	caniuse

The input group relies on broadly-supported layout and native form controls.