Forms

Documentation and examples for forms.

Form group

The form-group class expand the elements.

This is a help text
<form>
  <div class="form-group">
    <label>User:</label>
    <input type="text" placeholder="User">
    <span class="help">This is a help text</span>
  </div>
  <div class="form-group">
    <label>Password:</label>
    <input type="password" placeholder="Password">
  </div>  
  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox">
      Check me out
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Form elements

This is a help text
<form>
  <div class="form-group">
    <label>Input</label>
    <input type="text">
    <span class="help">This is a help text</span>
  </div>
  <div class="form-group">
    <label>Select</label>
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label>Multiple select</label>
    <select multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label>Textarea</label>
    <textarea></textarea>
  </div>
</form>

Horizontal checkbox and radios

<form>
  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox" name="horizotal-checkbox">
      First checkbox
    </label>
    <label class="checkbox">
      <input type="checkbox" name="horizotal-checkbox">
      Second checkbox
    </label>
    <label class="checkbox disabled">
      <input type="checkbox" name="horizotal-checkbox" disabled>
      Third checkbox
    </label>
  </div>
  <div class="form-group">
    <label class="radio">
      <input type="radio" name="horizotal-radio">
      First radio
    </label>
    <label class="radio">
      <input type="radio" name="horizotal-radio">
      Second radio
    </label>
    <label class="radio disabled">
      <input type="radio" name="horizotal-radio" disabled>
      Third radio
    </label>
  </div>
</form>

Vertical checkbox and radios

Just use checkbox-expanded or radio-expanded classes to expand each item.

<form>
  <div class="form-group">
    <label class="checkbox-expanded">
      <input type="checkbox" name="vertical-checkbox">
      First checkbox
    </label>
    <label class="checkbox-expanded">
      <input type="checkbox" name="vertical-checkbox">
      Second checkbox
    </label>
    <label class="checkbox-expanded disabled">
      <input type="checkbox" name="vertical-checkbox" disabled>
      Third checkbox
    </label>
  </div>
  <div class="form-group">
    <label class="radio-expanded">
      <input type="radio" name="vertical-radio">
      First radio
    </label>
    <label class="radio-expanded">
      <input type="radio" name="vertical-radio">
      Second radio
    </label>
    <label class="radio-expanded disabled">
      <input type="radio" name="vertical-radio" disabled>
      Third radio
    </label>
  </div>
</form>

File input

<form>
  <div class="form-group">
    <input type="file">
  </div>
</form>

Range input

<form>
  <div class="form-group">
    <input type="range">
  </div>
</form>

Read only

<form>
  <div class="form-group">
    <input type="text" placeholder="Read only here" readonly>
  </div>
</form>

Disabled elements

On checkbox and radio is necessary to use a disabled class in the label tag.

<form>
  <div class="form-group">
    <input type="text" placeholder="Disabled here" disabled>
  </div>
  <div class="form-group">
    <select disabled>
      <option>Disabled select</option>
      <option>...</option>
    </select>
  </div>
  <div class="form-group">
    <label class="checkbox disabled">
      <input type="checkbox" disabled>
      Checkbox
    </label>
  </div>
  <div class="form-group">
    <label class="radio disabled">
      <input type="radio" disabled>
      Radio
    </label>
  </div>
  <button type="button" disabled>Disabled</button>
</form>

Form columns

With form-columns class you can use the column grid classes (column or column-of-x), depending on the situation.

For example:

  • On the first row is used the class column, because is used only 2 columns with the same width size.
  • On the second row is not neccesary a column class, because is only a form-group.
  • On the thirth row is used the column-of-x class because is neccesary use diferent size of columns.

NOTE: The same number of columns of the original grid is used here too (12 columns).

Example: 123 Main St.
<form>
  <div class="form-columns">
    <div class="column form-group">
      <label>Name:</label>
      <input type="text">
    </div>
    <div class="column form-group">
      <label>Last Name:</label>
      <input type="text">
    </div>
  </div>
  <div class="form-group">
    <label>Address:</label>
    <input type="text">
    <span class="help">Example: 123 Main St.</span>
  </div>
  <div class="form-columns">
    <div class="column-of-6 form-group">
      <label>City:</label>
      <input type="text">
    </div>
    <div class="column-of-4 form-group">
      <label>State:</label>
      <select>
        <option default>Choose state</option>
        <option>...</option>
      </select>
    </div>
    <div class="column-of-2 form-group">
      <label>Zip:</label>
      <input type="number">
    </div>
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox">
      I agree with the <a href="#">terms and conditions</a>
    </label>
  </div>
  <button type="submit">Submit</button>
</form>

Two columns form

Example: 123 Main St.
<form>
  <div class="form-columns">
    <div class="column-of-2 form-group">
      <label>Name:</label>
    </div>
    <div class="column form-group">
      <input type="text">
    </div>
  </div>
  <div class="form-columns">
    <div class="column-of-2 form-group">
      <label>Last Name:</label>
    </div>
    <div class="column form-group">
      <input type="text">
    </div>
  </div>
  <div class="form-columns">
    <div class="column-of-2 form-group">
      <label>Address:</label>
    </div>
    <div class="column form-group">
      <input type="text">
      <span class="help">Example: 123 Main St.</span>
    </div>
  </div>
  <div class="form-columns">
    <div class="column-of-2 form-group">
      <label>Checkbox:</label>
    </div>
    <div class="column form-group">
      <label class="checkbox">
        <input type="checkbox">
        I agree
      </label>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

Validations

Looks good!
Looks good!
Please type the city
Please select the state
Please type the zip
<form>
  <div class="form-columns">
    <div class="column form-group">
      <label>Name:</label>
      <input class="valid" type="text" value="Giovanni">
      <span class="valid-feedback">Looks good!</span>
    </div>
    <div class="column form-group">
      <label>Last Name:</label>
      <input class="valid" type="text" value="Mendoza">
      <span class="valid-feedback">Looks good!</span>
    </div>
  </div>
  <div class="form-columns">
    <div class="column-of-6 form-group">
      <label>City:</label>
      <input class="invalid" type="text">
      <span class="invalid-feedback">Please type the city</span>
    </div>
    <div class="column-of-4 form-group">
      <label>State:</label>
      <select class="invalid">
        <option default>Choose state</option>
        <option>...</option>
      </select>
      <span class="invalid-feedback">Please select the state</span>
    </div>
    <div class="column-of-2 form-group">
      <label>Zip:</label>
      <input class="invalid" type="number">
      <span class="invalid-feedback">Please type the zip</span>
    </div>
  </div>
  <div class="form-group">
    <label class="checkbox invalid">
      <input type="checkbox">
      I agree with the <a href="#">terms and conditions</a>
      <span class="invalid-feedback">You must agree before submitting</span>
    </label>
  </div>
  <button type="submit">Submit</button>
</form>