Input Group

v1.0.0·Added in 1.0.0

Joins a field with text addons, selects, icons and buttons into one box with one focus ring and one error state.

Several controls read as one field: the whole row takes a single soft ring when any part has focus, a single red ring when it is invalid, and dims as one when disabled. Tab walks through the controls in order. A click or tap on a text addon like https:// or kg lands the caret in the input next to it; a click on the label focuses the first control. Selects inside open their list as usual, as a bottom sheet below 768px. A solid button at the end (Apply) sits flush with the rounded corner and shows its spinner while loading without changing width. On a phone the row stays on one line down to 320px: addons never wrap, the input shrinks, text is 16px so iOS never zooms and the md row grows to 44px.