Input Groups

Attach prefix or suffix text beside a field while keeping a clear accessible name.

Addons share one border with the field

An input group is a flex row. The addon is a hint or unit, not a replacement for a visible label. Connect the addon with aria-describedby when it helps explain the value.

@

Letters and numbers only. The @ mark is decoration; the label still names the field.

@example.com

The domain suffix is fixed; enter only the local part.

https://example.com/users/
$ .00

Enter whole dollars. Cents are shown as a fixed suffix.

With textarea

Prevent wrapping on long addons

Use input-group-nowrap when a prefix must stay on one line with the field.

@

Sizing and combined controls

Tag
Tag
Player name
Name

Check the box if this code should apply, then enter the code.

What to remember

Important HTML

The label names the field. The addon is connected with aria-describedby.

<label for="username">Username</label>
<div class="input-group">
  <span class="input-group-text" id="username-addon">@</span>
  <input id="username" name="username" type="text"
    aria-describedby="username-addon">
</div>