Forms

Basic Examples

Bulma includes comprehensive form classes and styling. Forms utilize the following markup pattern:

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

Advanced Examples

Fields with instructions, fields with icons, multi-selects, grouped buttons & fields.

Instructions displayed below field can be styled with <p class="help is-success"> and <p class="help is-danger"> classes to indicate validation status.

Use .field-body.is-grouped wrapper for grouped field elements. Use .is-expanded to allow one element to take up remaining room.

Progress Indicators

The progress bar is a simple CSS class that styles the native progress HTML element.

If you don't set the HTML value attribute, you can display an indeterminate progress bar. It's used to show that some progress is going on, but the actual duration is not yet determined.

Wizard

This component is based on the Bulma Steps component, but the HTML/CSS is not dependent on the JavaScript and can be used independently. (BYO JavaScript)

Error Handling

©2020 YWCA Retirement Fund

Resources

Connect

Address

52 Vanderbilt Avenue, 6th Floor
New York, NY 10017