component

Overview

Form elements basics

All form inputs are composed by a field container, a control child ( both classes) and it's input HTML element. The field class it's meant to contain an optional input label, a form control and an optional help and/or error text.

Despite that the use of the inputs classes are supported without any container, it's recommended to build them as explained before for consistency, sizing, and other useful customizations like adding an icon.

checkbox and radio elements must be inserted inside a label with their respective classes: .checkbox, .radio

The following CSS classes are available:

label
input
textarea
select
checkbox
radio
button
message

Basics inputs

Basic example with field and control container classes.

  <form>
    <div class="field">
      <div class="control">
      <label class="label">Name</label>
      <input type="text" class="input">
      </div>
    </div>
    <div class="field">
      <label class="label">Select an option</label>
      <div class="control">
        <div class="select">
          <select>
            <option value="option-1">Option 1</option>
            <option value="option-2">Option 2</option>
            <option value="option-3">Option 3</option>
          </select>
        </div>
      </div>
    </div>
    <div class="field">
      <label class="label">Select an option</label>
      <div class="control">
        <label class="radio">
          <input type="radio" name="option">
          Option 1
        </label>
        <label class="radio">
          <input type="radio" name="option">
          Option 2
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="label">Leave a comment</label>
        <textarea class="textarea is-block mb-3"></textarea>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox">
          Accept terms
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button class="button is-primary">Submit</button>
      </div>
    </div>
  </form>

Variables

:root {
  --input-font-size: var(--text-sm, .875rem);
  --input-font-weight: var(--weight-medium, 500);
  --input-small-font-size: var(--text-xs, .75rem);
  --input-large-font-size: 1.1875rem;
  --input-color: var(--color-contrast);
  --input-placeholder-color: var(--color-contrast-light-lower);
  --input-hover-color: var(--color-contrast-lighter);
  --input-background-color: var(--color-white);
  --input-hover-background-color: var(--input-background-color);
  --input-border-stlye: solid;
  --input-border-width: 1px;
  --input-border-color: var(--color-contrast-background);
  --input-hover-border-color: var(--color-accent-light);
  --input-border-radius: var(--radius-md);
  --input-focus-color: var(--input-color);
  --input-focus-border-color: var(--color-accent);
  --input-focus-box-shadow-size: none;
  --input-disabled-color: var(--color-contrast-lighter);
  --input-disabled-background-color: var(--color-contrast-background);
  --input-x-space: 2em;
  --input-arrow-color: var(--color-contrast-light);
  --input-icon-color: var(--color-contrast-light-lower);
  --input-icon-active-color: var(--color-accent);
  --input-box-shadow: none;
  --input-transition: border .3s, color .3s;
}