Form

Here some examples on how to use forms. You can use the grid to manage columns of content thanks to classes columns and col-* as in the following examples. Each control and label is wrapped around a div with class field to dispose form elements correctly

<div class="field">
  <label class="label">Label</label>
  <input class="input" placeholder="Placeholder" type="text" />
  <small class="help is-success">Put something here</small>
</div>
<div class="field">
  <label class="label">Label</label>
  <select class="input" placeholder="Placeholder">
    <option>Test abc</option>
    <option>Test def</option>
  </select>
  <small class="help is-success">Put something here</small>
</div>
<div class="field">
  <label class="label">Label</label>
  <input class="input" placeholder="Placeholder" type="text" />
  <small class="help is-danger">Put something here</small>
</div>
<div class="columns">
  <div class="col-mobile-12 col-tablet-6 col-desktop-6">
    <div class="field">
      <label class="label">Label</label>
      <input class="input" placeholder="Placeholder" type="text" />
    </div>
  </div>
  <div class="col-mobile-12 col-tablet-6 col-desktop-6">
    <div class="field">
      <label class="label">Label</label>
      <input class="input" placeholder="Placeholder" type="text" />
    </div>
  </div>
</div>
<div class="field">
  <label class="label">Label</label>
  <input class="input" placeholder="Placeholder" type="text" />
  <small class="help">Put something here</small>
</div>
<div class="field">
  <label class="label">Label</label>
  <textarea class="input"></textarea>
</div>
<div class="field">
  <span class="label">Label</span>
  <div class="checkbox">
    <label>
      <input type="checkbox" />
      This is a checkbox
    </label>
    <label>
      <input type="checkbox" />
      This is a checkbox
    </label>
    <label>
      <input type="checkbox" />
      This is a checkbox
    </label>
  </div>
  <small class="help">Put something here</small>
</div>
<div class="field">
  <span class="label">Label</span>
  <div class="radio">
    <label>
      <input type="radio" name="radio" />
      This is a radio
    </label>
    <label>
      <input type="radio" name="radio" />
      This is a radio
    </label>
    <label>
      <input type="radio" name="radio" />
      This is a radio
    </label>
  </div>
  <small class="help">Put something here</small>
</div>
<div class="field">
  <span class="label">Label</span>
  <div class="checkbox is-inline">
    <label>
      <input type="checkbox" />
      One
    </label>
    <label>
      <input type="checkbox" />
      Two
    </label>
    <label>
      <input type="checkbox" />
      Three
    </label>
  </div>
  <small class="help">Put something here</small>
</div>
<div class="field">
  <span class="label">Label</span>
  <div class="radio is-inline">
    <label>
      <input type="radio" name="radio1" />
      Yes
    </label>
    <label>
      <input type="radio" name="radio1" />
      No
    </label>
    <label>
      <input type="radio" name="radio1" />
      Maybe
    </label>
  </div>
  <small class="help">Put something here</small>
</div>