Bulma Form Elements

Bulma provides comprehensive form styling that makes creating beautiful, accessible forms incredibly easy. All form elements are fully responsive and customizable.

Basic Form Structure

The fundamental form structure uses the .field class:

<form>
  <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">
      <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>
    </div>
    <p class="help is-success">This username is available</p>
  </div>
  
  <div class="field">
    <div class="control">
      <button class="button is-link">Submit</button>
    </div>
  </div>
</form>

Form Field Components

Label

<label class="label">Email</label>
<label class="label is-small">Small Label</label>
<label class="label is-medium">Medium Label</label>
<label class="label is-large">Large Label</label>

Control

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

<div class="control is-expanded">
  <input class="input" type="text" placeholder="Expanded to fill space">
</div>

<div class="control is-loading">
  <input class="input" type="text" placeholder="Loading state">
</div>

Input Types

Text Input

<input class="input" type="text" placeholder="Text input">
<input class="input" type="email" placeholder="Email input">
<input class="input" type="password" placeholder="Password">
<input class="input" type="number" placeholder="Number input">
<input class="input" type="tel" placeholder="Telephone">
<input class="input" type="url" placeholder="URL">
<input class="input" type="search" placeholder="Search">

Textarea

<textarea class="textarea" placeholder="Textarea"></textarea>

<!-- Fixed size textarea -->
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>

Select Dropdown

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

<!-- Rounded select -->
<div class="select is-rounded">
  <select>
    <option>Rounded dropdown</option>
    <option>With options</option>
  </select>
</div>

<!-- Multiple select -->
<div class="select is-multiple">
  <select multiple size="8">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

File Input

<div class="file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">Choose a file…</span>
    </span>
  </label>
</div>

<!-- File input with name -->
<div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">Choose a file…</span>
    </span>
    <span class="file-name">Screen Shot 2024-01-01.png</span>
  </label>
</div>

Form States

Input States

<!-- Normal state -->
<input class="input" type="text" placeholder="Normal input">

<!-- Focus state -->
<input class="input is-focused" type="text" placeholder="Focused input">

<!-- Hover state -->
<input class="input is-hovered" type="text" placeholder="Hovered input">

<!-- Colors -->
<input class="input is-primary" type="text" placeholder="Primary input">
<input class="input is-link" type="text" placeholder="Link input">
<input class="input is-info" type="text" placeholder="Info input">
<input class="input is-success" type="text" placeholder="Success input">
<input class="input is-warning" type="text" placeholder="Warning input">
<input class="input is-danger" type="text" placeholder="Danger input">

<!-- Sizes -->
<input class="input is-small" type="text" placeholder="Small input">
<input class="input is-normal" type="text" placeholder="Normal input">
<input class="input is-medium" type="text" placeholder="Medium input">
<input class="input is-large" type="text" placeholder="Large input">

<!-- Rounded -->
<input class="input is-rounded" type="text" placeholder="Rounded input">

Validation States

<!-- Success state -->
<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <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>

<!-- Error state -->
<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <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>

Form Addons

Field with Addons

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

<!-- Expanded addons -->
<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>
      </select>
    </div>
  </div>
  <div class="control">
    <button type="submit" class="button is-primary">Choose</button>
  </div>
</div>

Field with Icons

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

Checkboxes and Radio Buttons

Checkboxes

<label class="checkbox">
  <input type="checkbox">
  Remember me
</label>

<label class="checkbox" disabled>
  <input type="checkbox" disabled>
  Disabled checkbox
</label>

Radio Buttons

<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 class="control">
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled>
    Maybe (disabled)
  </label>
</div>

Form Groups

Horizontal Form

<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">
        <input class="input" type="text" placeholder="Name">
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icons-left">
        <input class="input" type="email" placeholder="Email">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label"></div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <button class="button is-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Complete Form Examples

Login Form

<form class="box">
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="e.g. alex@example.com">
    </div>
  </div>

  <div class="field">
    <label class="label">Password</label>
    <div class="control">
      <input class="input" type="password" placeholder="********">
    </div>
  </div>

  <div class="field">
    <label class="checkbox">
      <input type="checkbox">
      Remember me
    </label>
  </div>

  <div class="field">
    <button class="button is-primary">Sign in</button>
  </div>
</form>

Registration Form

<form>
  <div class="field is-horizontal">
    <div class="field-body">
      <div class="field">
        <label class="label">First Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="First name">
        </div>
      </div>
      <div class="field">
        <label class="label">Last Name</label>
        <div class="control">
          <input class="input" type="text" placeholder="Last name">
        </div>
      </div>
    </div>
  </div>

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

  <div class="field">
    <label class="label">Password</label>
    <div 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>
    </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 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>
</form>

Contact Form

<form>
  <div class="field">
    <label class="label">Subject</label>
    <div class="control">
      <div class="select">
        <select>
          <option>Select dropdown</option>
          <option>General inquiry</option>
          <option>Support</option>
          <option>Billing</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 is-grouped">
    <div class="control">
      <button class="button is-primary">Submit</button>
    </div>
    <div class="control">
      <button class="button is-primary is-light">Cancel</button>
    </div>
  </div>
</form>

Best Practices

Always wrap form controls in .field and .control
Use appropriate input types for better mobile experience
Include helpful validation messages
Use icons to enhance form usability
Test forms on mobile devices
Ensure proper label associations for accessibility

Up next: Bulma Basic Elements

Bulma CSS Tutorial