Input group

Basic

Wrap an addon and a field (.input, .select, or .textarea) in .input-group. The addon sits flush against the input on a shared surface, with a single focus state on the wrapper.

Icon

Drop an icon into .input-group__text for a leading or trailing glyph. The addon stays transparent so the icon reads against the wrapper.

Sizes

Add .input-group--sm or .input-group--lg on the wrapper and the matching size modifier on the field child (e.g. .input--sm) to scale every member together.

With button

A button slot sits inset inside the wrapper with its own concentric radius, reading as a chip floating in the field. Pair the button size with the wrapper size; retune the inset with --input-group-inset.

Pair the button size with the wrapper size so the chip's text fits its chip: .input-group--sm + .button--sm, default + default, .input-group--lg + .button--lg.

Select

A <select class="select"> stands in for the input. The wrapper strips its border the same way it does for .input.

Labelled select

Lead with a text or icon addon and let the select stand in for the input. Reads as a labelled chooser, no separate field needed.

With select

Mix a text addon and a select on opposite sides for a labelled, scoped input.

Multiple addons

Stack more than one addon on the same side. They share the surface and read as one phrase.

Textarea

A textarea grows past the default height and the wrapper grows with it. Addons hold to their top edge.

Validation

An invalid child paints the wrapper red. Set aria-invalid="true" for server-rendered errors, or pair required with :user-invalid for native validation after the first touch.

Disabled

Disable the input directly; the wrapper dims with it via its opacity, no extra class on the group.

Customization

These variables retune .input-group without touching component CSS. Override on the wrapper, a parent scope, or :root.