Input group

Squares the corners where two controls touch and overlaps their borders by a pixel, so a field and its button look like one control.

A field and its button

It joins the look and nothing else: the controls keep their own values, names and validation. The radius is set on the control inside each element’s shadow root rather than on the host, which is what ISS-025 fixed — a rule on the host alone leaves the inner control’s corners round.

.hui-input-group

Joins adjacent controls, squaring the touching corners.

<div class="hui-input-group">
  <hui-input aria-label="Code"></hui-input>
  <hui-button>Redeem</hui-button>
</div>