Forms

Bulma styles form fields the same way as buttons: same height, border, rounding and state colours. Each field is built from two wrappers. A field (field) is a form row — label, input and help text, with a bottom margin. A control (control) wraps the input itself; icons and the loading indicator attach to it.

A field with a label

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="field">
  <label class="label" for="guest-name">Name</label>
  <div class="control">
    <input class="input" id="guest-name" type="text" placeholder="Anna">
  </div>
</div>

A bold label and a full-width input with rounded corners. Fields get classes by type: input, textarea, and a drop-down list gets a select wrapper.

A booking form

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<form style="max-width: 420px">
  <div class="field">
    <label class="label" for="guests">Guests</label>
    <div class="control">
      <div class="select">
        <select id="guests">
          <option>2</option>
          <option>4</option>
          <option>6</option>
        </select>
      </div>
    </div>
  </div>
 
  <div class="field">
    <label class="label">Room</label>
    <div class="control radios">
      <label class="radio"><input type="radio" name="hall" checked> Main hall</label>
      <label class="radio"><input type="radio" name="hall"> Terrace</label>
    </div>
  </div>
 
  <div class="field">
    <label class="label" for="wishes">Requests</label>
    <div class="control">
      <textarea class="textarea" id="wishes" rows="3" placeholder="For example, a table by the window"></textarea>
    </div>
  </div>
 
  <div class="field">
    <div class="control">
      <label class="checkbox"><input type="checkbox"> Remind me by text message</label>
    </div>
  </div>
 
  <div class="field is-grouped">
    <div class="control"><button class="button is-primary">Book</button></div>
    <div class="control"><button type="reset" class="button is-light">Clear</button></div>
  </div>
</form>

A drop-down with an arrow, two radios in a row, a multi-line field, a checkbox and two buttons side by side. The field is-grouped wrapper puts several control blocks in a row.

States and help text

A colour modifier colours the field border, and a help paragraph under it explains what is wrong:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 
<div class="field">
  <label class="label" for="email">Email</label>
  <div class="control has-icons-left">
    <input class="input is-danger" id="email" type="email" value="anna@example">
    <span class="icon is-small is-left"><i class="fa-solid fa-envelope"></i></span>
  </div>
  <p class="help is-danger">Check the address: the domain is missing.</p>
</div>

A field with a red border, an envelope icon on the left and red help text. Bulma contains no icons: here they come from the loaded Font Awesome, while control has-icons-left and icon is-left position the icon inside the field.

A field with a button

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="field has-addons">
  <div class="control is-expanded">
    <input class="input" type="text" placeholder="Promo code">
  </div>
  <div class="control">
    <button class="button is-info">Apply</button>
  </div>
</div>

The field and the button are joined into one block; is-expanded stretches the field over all the free space.

Class	Where	What it does
`is-small`, `is-medium`, `is-large`	field	Size
`is-rounded`	`input`	Rounded ends
`is-loading`	`control`	A loading indicator in the field
`is-horizontal`	`field`	The label to the left of the field

Common mistake

Putting the select class on the <select> tag itself. Bulma draws the arrow on the wrapper, so the right way is <div class="select"><select>...</select></div>. Without the wrapper the list keeps the browser's style.

Thanks for reading!