You are viewing the deprecated 0.9.3 version of the website. Click here to view the latest version

The official Bulma blog

Subscribe

New field element (for better controls)

A new versatile container for form controls

March 10th, 2017

TL;DR: there’s a new .field container, and .control has been re-purposed.

Since the beginning, the .control has been a very versatile element that allowed:

  • to space controls vertically
  • to include an icon alongside inputs, buttons, textareas…
  • to append a loading spinner
  • to create horizontal forms
  • to create control addons
  • to create control groups

The problem

The .control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping). It led to issues where you couldn’t:

  • add a help text horizontally
  • add multiple icons or loaders in a group of controls
  • add a different icon on addons

The solution

The new .field element becomes the block container for .control elements. As a result, it inherits the .has-addons, .is-grouped, and .is-horizontal modifiers.

Furthermore .control element can only contain a .button, .input, .select, or .textarea, and eventually a .icon. It can no longer contain a .help element or other .control.

But it allows more elaborate designs.

// Before
.control
  .has-addons
  .has-icon
  .is-grouped
  .is-horizontal
  .is-loading

// After
.control
  .has-icon
  .is-loading
.field
  .has-addons
  .is-grouped
  .is-horizontal
.field-label
.field-body
<!-- Before -->
<label class="label">Username</label>
<p class="control has-icon has-icon-right">
  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span class="help is-success">This username is available</span>
</p>

<!-- After -->
<div class="field">
  <label class="label">Username</label>
  <p class="control has-icon has-icon-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
  </p>
  <p class="help is-success">This username is available</p>
</div>

Examples

Addons with multiple icons or states.

Horizontal form with help text

This email is correct


#native_company# #native_desc#
#native_cta#

Newsletter Features, releases, showcase… stay in the loop!