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

Blog

Stay updated about new features, bug fixes, and releases

Subscribe

Back

10 Mar 2017

New field element (for better controls)


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="fa 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="fa 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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!