Input Groups

.group-input fuses multiple form controls into a single horizontal unit. Borders and border-radius are merged automatically — you get a connected, seamless row without any manual overrides.

You can combine any mix of: text inputs, selects, file inputs, .input-prepend, .input-append, and buttons.

Prepend

.input-prepend attaches a label or symbol to the left of the control. It is styled as a subtle inset addon that does not compete visually with the input.

<div class="group-input">
  <span class="input-prepend">@</span>
  <input class="form-input" type="text" placeholder="username">
</div>

Append

.input-append attaches a label or symbol to the right of the control.

<div class="group-input">
  <input class="form-input" type="text" placeholder="your-site">
  <span class="input-append">.com</span>
</div>

.com

Prepend and Append Together

Both addons can be combined on a single input for patterns like price fields or unit-labeled inputs.

<div class="group-input">
  <span class="input-prepend">$</span>
  <input class="form-input" type="number" placeholder="0.00">
  <span class="input-append">USD</span>
</div>

$USD

Input with Button

The most common pattern: a text or email input paired with an action button. Used for search bars, newsletter forms, coupon codes, and invite links.

<div class="group-input">
  <input class="form-input" type="email" placeholder="Email address">
  <button class="button is-primary" type="button">Subscribe</button>
</div>

Prepend + Input + Button

Three elements in a row: a text addon, an input, and an action button. Common for URL verification and domain input patterns.

<div class="group-input">
  <span class="input-prepend">https://</span>
  <input class="form-input" type="text" placeholder="company.com">
  <button class="button is-primary" type="button">Verify</button>
</div>

https://

Select + Input + Button

Combine a filter select, a search input, and a submit button for record filtering or advanced search patterns.

<div class="group-input">
  <select class="form-select" aria-label="Filter type">
    <option>Users</option>
    <option>Orders</option>
    <option>Invoices</option>
  </select>
  <input class="form-input" type="search" placeholder="Search records">
  <button class="button is-dark" type="button">Search</button>
</div>