Form

Forms are forms.

Usage

Form

<form class="c-form">
  <fieldset>
    <legend>Form legend</legend>
    <input type="text" placeholder="c-text input" class="c-form__input">
    <input type="password" placeholder="Password input" class="c-form__input">
    <select class="c-form__select">
      <option>Option 01</option>
      <option>Option 02</option>
    </select>
    <button class="c-button">c-button</button>
    <label><input type="checkbox" class="c-form__check"> Checkbox</label>
    <label><input type="radio" class="c-form__radio"> Radio</label>
    <textarea cols="30" rows="5" placeholder="Textarea" class="c-form__text c-form__text--inline"></textarea>
  </fieldset>
</form>

Control states

Disabled

<input type="text" placeholder="" class="c-form__input" disabled">

Validation states

Unagi!

<input type="text" placeholder="c-form--danger" class="c-form__input c-form__input--danger">
<input type="text" placeholder="c-form--success" class="c-form__input c-form__input--success">

Control modifiers

Size modifiers

<input type="text" placeholder="" class="c-form__input c-form--input--xs">

Form inline

<input type="text" placeholder="" class="c-form__input c-form__input--inline">

Form blank

<input type="text" placeholder="" class="c-form__input c-form__input--blank">

Form and grid

Form label

Radio label

Radio
1 2 3

Checkbox label

Checkbox
1 2 3

Form label

<form class="c-form">
  <div class="o-flex-grid o-flex-grid--gutters">
    <div class="o-flex-grid__cell o-size--1of2">
      <input type="text" placeholder="" class="c-form__input">
    </div>
    <div class="o-flex-grid__cell">
      <input type="text" placeholder="" class="c-form__input">
    </div>
    <div class="o-flex-grid__cell">
      <input type="text" placeholder="" class="c-form__input">
    </div>
  </div>
  <div class="o-flex-grid o-flex-grid--gutters">
    <div class="o-flex-grid__cell">
      <input type="text" placeholder="" class="c-form__input">
    </div>
    <div class="o-flex-grid__cell o-size--1of3">
      <select class="c-form__select">
        <option>Option 01</option>
        <option>Option 02</option>
      </select>
    </div>
  </div>
</form>

Form and icons

<div class="c-form-icon">
  {{ icon('calendar') }}
  <input type="text" placeholder="" class="c-form__input">
</div>

Form label modifier

<div class="c-form-flabel">
  <label for="c-form-l-i" class="c-form__label">Floating label</label>
  <input type="text" id="c-form-l-i" placeholder="Floating label" class="c-form__input">
</div>

Form field

<div class="c-form__field">
  <input type="text" placeholder="c-text input" class="c-form__input">
</div>