COMPONENTS

Input groups

One input-group wrapper arranges a native input with text prefixes, suffixes or an action. Each field keeps its own label and shared control styling.

Usage

Markup: .input-group around native controls and text

Behaviour: Actions need an application handler or a real form destination.

  • The prefix or suffix does not replace a label. Include units in the visible label and connect meaningful supporting text with aria-describedby when needed.
  • Groups wrap when space is limited. Small gaps keep each control's borders and focus outline clear rather than relying on tightly joined corners.
  • Use type="submit" only for actions backed by an actual form. Application routes and processing remain your responsibility. Static action demos use type="button".

Component API and styling module · Inherited appearance settings

An amount with a prefix

The visible label names both the field and its currency; the decorative prefix avoids repeating it.

Enter the total before tax.
HTMLSelect text to copy
<div class="form-group">
  <label for="invoice-amount">Amount in euros</label>
  <div class="input-group">
    <span aria-hidden="true">€</span>
    <input id="invoice-amount" name="amount" type="number" min="0" step="0.01"
           aria-describedby="invoice-amount-help">
  </div>
  <small id="invoice-amount-help">Enter the total before tax.</small>
</div>

A field with an action

The example action is presentation-only. Your application supplies the search behavior.

HTMLSelect text to copy
<div class="form-group">
  <label for="group-search">Search projects</label>
  <div class="input-group">
    <input id="group-search" name="query" type="search">
    <button type="button">Search</button>
  </div>
</div>

A measured value

Units are explicit in the label, with a decorative suffix.

HTMLSelect text to copy
<div class="form-group" data-size="small">
  <label for="package-weight">Package weight in kilograms</label>
  <div class="input-group">
    <input id="package-weight" name="weight" type="number" min="0" step="0.1">
    <span aria-hidden="true">kg</span>
  </div>
</div>

A native action input

Action inputs use the same grouping role as buttons. The editable field takes the available width; the action wraps when needed.

HTMLSelect text to copy
<div class="form-group">
  <label for="native-group-query">Search documents</label>
  <div class="input-group">
    <input id="native-group-query" type="search" name="query">
    <input type="button" value="Search">
  </div>
</div>