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

# Blog

Stay updated about new features, bug fixes, and releases

Subscribe
10 Mar 2017 Field element

Back

# 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

From

This email is correct

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!