Get 20% off with code BULMA
Valid until the end of November 2024
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Form controls

All generic form controls, designed for consistency

Bulma supports the following native HTML form elements: <form> <button> <input> <textarea> and <label>.

The following CSS classes are supported:

  • label
  • input
  • textarea
  • select
  • checkbox
  • radio
  • button
  • help

To maintain an evenly balanced design, Bulma provides a very useful control container with which you can wrap the form controls.
When combining several controls in a form, use the field class as a container, to keep the spacing consistent.

Complete form example #

Example

This username is available

This email is invalid

HTML 

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

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

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-danger">This email is invalid</p>
</div>

<div class="field">
  <label class="label">Subject</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Textarea"></textarea>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      I agree to the <a href="#">terms and conditions</a>
    </label>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="question">
      Yes
    </label>
    <label class="radio">
      <input type="radio" name="question">
      No
    </label>
  </div>
</div>

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-link is-light">Cancel</button>
  </div>
</div>

For the best results using Bulma, it's recommended to use the control element as often as possible.

Form field #

The field container is a simple container for:

  • a text label
  • a form control
  • an optional helptext

Example

This is a help text

HTML 

<div class="field">
  <label class="label">Label</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
  <p class="help">This is a help text</p>
</div>

This container allows form fields to be spaced consistently.

Example

HTML 

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

Form control #

The Bulma control is a versatile block container meant to enhance single form controls. Because it has the same height as the element that it wraps, it can only contain the following Bulma elements:

  • input
  • select
  • button
  • icon

This container gives the ability to:

  • keep the spacing consistent
  • combine form controls into a group
  • combine form controls into a list
  • append and prepend icons to a form control

Example

HTML 

<div class="control">
  <input class="input" type="text" placeholder="Text input">
</div>

Example

HTML 

<div class="control">
  <div class="select">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</div>

Example

HTML 

<div class="control">
  <button class="button is-primary">Submit</button>
</div>

With icons #

You can append one of 2 modifiers on a control:

  • has-icons-left
  • and/or has-icons-right

You also need to add a modifier on the icon:

  • icon is-left if has-icons-left is used
  • icon is-right if has-icons-right is used

The size of the input will define the size of the icon container.

Example

HTML 

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control">
    <button class="button is-success">
      Login
    </button>
  </p>
</div>

You can append icons to select dropdowns as well.

Example

HTML 

<div class="field">
  <p class="control has-icons-left">
    <span class="select">
      <select>
        <option selected>Country</option>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </span>
    <span class="icon is-small is-left">
      <i class="fas fa-globe"></i>
    </span>
  </p>
</div>

If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon.

Example

HTML 

<div class="field">
  <label class="label is-small">Small input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-small" type="email" placeholder="Normal">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Example

HTML 

<div class="field">
  <label class="label">Normal input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Normal">
    <span class="icon is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Example

HTML 

<div class="field">
  <label class="label is-medium">Medium input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Normal">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Example

HTML 

<div class="field">
  <label class="label is-large">Large input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Normal">
    <span class="icon is-large is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-large is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Large">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope fa-lg"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check fa-lg"></i>
    </span>
  </div>
</div>

Form addons #

If you want to attach controls together, use the has-addons modifier on the field container:

Example

HTML 

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <button class="button is-info">
      Search
    </button>
  </div>
</div>

You can attach inputs, buttons, and dropdowns only.

It can be useful to append a static button.

Example

@gmail.com

HTML 

<div class="field has-addons">
  <p class="control">
    <input class="input" type="text" placeholder="Your email">
  </p>
  <p class="control">
    <a class="button is-static">
      @gmail.com
    </a>
  </p>
</div>

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

Example

HTML 

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

Example

HTML 

<div class="field has-addons">
  <div class="control is-expanded">
    <div class="select is-fullwidth">
      <select name="country">
        <option value="Argentina">Argentina</option>
        <option value="Bolivia">Bolivia</option>
        <option value="Brazil">Brazil</option>
        <option value="Chile">Chile</option>
        <option value="Colombia">Colombia</option>
        <option value="Ecuador">Ecuador</option>
        <option value="Guyana">Guyana</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Peru">Peru</option>
        <option value="Suriname">Suriname</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Venezuela">Venezuela</option>
      </select>
    </div>
  </div>
  <div class="control">
    <button type="submit" class="button is-primary">Choose</button>
  </div>
</div>

Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.

Example

HTML 

<div class="field has-addons has-addons-centered">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

Example

HTML 

<div class="field has-addons has-addons-right">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

Form group #

If you want to group controls together, use the is-grouped modifier on the field container.

Example

Cancel

HTML 

<div class="field is-grouped">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.

Example

Cancel

HTML 

<div class="field is-grouped is-grouped-centered">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

Example

Cancel

HTML 

<div class="field is-grouped is-grouped-right">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

Add the is-expanded modifier on the control element you want to fill up the remaining space with.

Example

HTML 

<div class="field is-grouped">
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Find a repository">
  </p>
  <p class="control">
    <button class="button is-info">
      Search
    </button>
  </p>
</div>

Add the is-grouped-multiline modifier to allow controls to fill up multiple lines. This is ideal for a long list of controls.

Example

HTML 

<div class="field is-grouped is-grouped-multiline">
  <p class="control">
    <button class="button">
      One
    </button>
  </p>
  <p class="control">
    <button class="button">
      Two
    </button>
  </p>
  <p class="control">
    <button class="button">
      Three
    </button>
  </p>
  <p class="control">
    <button class="button">
      Four
    </button>
  </p>
  <p class="control">
    <button class="button">
      Five
    </button>
  </p>
  <p class="control">
    <button class="button">
      Six
    </button>
  </p>
  <p class="control">
    <button class="button">
      Seven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eight
    </button>
  </p>
  <p class="control">
    <button class="button">
      Nine
    </button>
  </p>
  <p class="control">
    <button class="button">
      Ten
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eleven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Twelve
    </button>
  </p>
  <p class="control">
    <button class="button">
      Thirteen
    </button>
  </p>
</div>

List of buttons

If you only need a list of buttons, try out the new buttons class with which you can create a multiline list of buttons.

Horizontal form #

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

  • field-label for the side label
  • field-body for the input/select/textarea container

You can use is-grouped or has-addons for the child elements.

Example

+44

Do not enter the first zero

This field is required

HTML 

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control is-expanded has-icons-left">
        <input class="input" type="text" placeholder="Name">
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icons-left has-icons-right">
        <input class="input is-success" type="email" placeholder="Email" value="[email protected]">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fas fa-check"></i>
        </span>
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label"></div>
  <div class="field-body">
    <div class="field is-expanded">
      <div class="field has-addons">
        <p class="control">
          <a class="button is-static">
            +44
          </a>
        </p>
        <p class="control is-expanded">
          <input class="input" type="tel" placeholder="Your phone number">
        </p>
      </div>
      <p class="help">Do not enter the first zero</p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Department</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <div class="select is-fullwidth">
          <select>
            <option>Business development</option>
            <option>Marketing</option>
            <option>Sales</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">Already a member?</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <label class="radio">
          <input type="radio" name="member">
          Yes
        </label>
        <label class="radio">
          <input type="radio" name="member">
          No
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Subject</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
      </div>
      <p class="help is-danger">
        This field is required
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Question</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <!-- Left empty for spacing -->
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <button class="button is-primary">
          Send message
        </button>
      </div>
    </div>
  </div>
</div>

To preserve the vertical alignment of labels with each type and size of control, the field-label comes with 4 size modifiers:

  • is-small
  • is-normal for any input or button
  • is-medium
  • is-large

Example

HTML 

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">No padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox">
          Checkbox
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-small">
    <label class="label">Small padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-small" type="text" placeholder="Small sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Normal label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Normal sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-medium">
    <label class="label">Medium label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-medium" type="text" placeholder="Medium sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-large">
    <label class="label">Large label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-large" type="text" placeholder="Large sized input">
      </div>
    </div>
  </div>
</div>

Disabled form #

You can disable part or a whole form by wrapping a set of controls in a fieldset with a disabled HTML attribute.

Example

HTML 

<fieldset disabled>
  
<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

</fieldset>

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$control-radius
 
var(--bulma-control-radius)
 
var(--bulma-radius)
 
$control-radius-small
 
var(--bulma-control-radius-small)
 
var(--bulma-radius-small)
 
$control-border-width
 
var(--bulma-control-border-width)
 
1px
 
$control-size
 
var(--bulma-control-size)
 
var(--bulma-size-normal)
 
$control-height
 
var(--bulma-control-height)
 
2.5em
 
$control-line-height
 
var(--bulma-control-line-height)
 
1.5
 
$control-padding-vertical
 
var(--bulma-control-padding-vertical)
 
calc(0.5em - 1px)
 
$control-padding-horizontal
 
var(--bulma-control-padding-horizontal)
 
calc(0.75em - 1px)
 
$control-focus-shadow-l
 
var(--bulma-control-focus-shadow-l)
 
50%
 
$label-color
 
var(--bulma-label-color)
 
var(--bulma-text-strong)
 
$label-weight
 
var(--bulma-label-weight)
 
var(--bulma-weight-semibold)
 
$help-size
 
var(--bulma-help-size)
 
var(--bulma-size-small)

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free