Input group

wu-input-group joins text addons, an input and buttons into one row. The outer corners stay round, inner borders overlap, and the hovered, focused or invalid control rises above its neighbors.

Class	Effect
`wu-input-group`	Root. Joined row; the input grows
`wu-input-group-text`	Part. Text addon with the alternate background

Size the children (wu-input sm, wu-btn sm); addons stretch to the row height.

Text addons

https://

USD

<div class="flex col gap-3">
  <div class="wu-input-group">
    <span class="wu-input-group-text">https://</span>
    <input class="wu-input" type="text" aria-label="Website" placeholder="example.com">
  </div>
  <div class="wu-input-group">
    <input class="wu-input" type="number" aria-label="Price" value="49">
    <span class="wu-input-group-text">USD</span>
  </div>
</div>

With a button

<div class="wu-input-group">
  <input class="wu-input" type="search" aria-label="Search" placeholder="Search">
  <button class="wu-btn brand" type="button">Search</button>
</div>

Small

<div class="wu-input-group">
  <span class="wu-input-group-text">@</span>
  <input class="wu-input sm" type="text" aria-label="Username" placeholder="username">
  <button class="wu-btn sm" type="button">Check</button>
</div>

Right to left

Addons and the joined corners swap sides.

https://

<div class="wu-input-group">
  <span class="wu-input-group-text">https://</span>
  <input class="wu-input" type="text" aria-label="الموقع" placeholder="example.com">
  <button class="wu-btn brand" type="button">اذهب</button>
</div>

Load only the input group

@use "@wovenui/components/input-group";

The input group needs no other component. The examples above also use the input and the button.