Forms

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Your name">
  </div>
  <p class="help is-primary">This is help text</p>
</div>
<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small">✉️</span>
  </div>
</div>

<div class="field">
  <label class="label">Comments</label>
  <div class="control">
    <textarea class="textarea" placeholder="Write here..."></textarea>
  </div>
</div>
<div class="field">
  <textarea class="textarea is-small" placeholder="Small"></textarea>
</div>

<div class="field">
  <div class="select">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>
<div class="field">
  <div class="select is-primary">
    <select><option>Primary select</option></select>
  </div>
</div>

<div class="field">
  <label class="checkbox">
    <input type="checkbox"> I accept terms
  </label>
</div>
<div class="field">
  <label class="radio">
    <input type="radio" name="gender"> Male
  </label>
  <label class="radio">
    <input type="radio" name="gender"> Female
  </label>
</div>

<div class="file">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">Choose file</span>
    <span class="file-name">No file selected</span>
  </label>
</div>
<div class="file is-primary is-small">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">Upload</span>
    <span class="file-name">avatar.png</span>
  </label>
</div>

<div class="field is-grouped">
  <div class="control">
    <input class="input" placeholder="Search">
  </div>
  <div class="control">
    <button class="button is-primary">Search</button>
  </div>
</div>
<div class="field has-addons">
  <div class="control">
    <input class="input" placeholder="Amount">
  </div>
  <div class="control">
    <button class="button">+</button>
  </div>
</div>

<div class="field">
  <div class="control is-loading">
    <input class="input" value="Loading...">
  </div>
</div>
<div class="field">
  <div class="control has-icons-right">
    <input class="input is-danger" value="Error">
    <span class="icon">⚠️</span>
  </div>
</div>