Form elements

Dropdowns

The SCSS variables for modifying dropdowns (and other form elements) can be found in the _brand.scss file, in the "Forms" section. 

  • 
<select>
  <option value="0">
    Select
  </option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

Checkboxes 

  • 
<label>
  <span class="form-checkbox">
    <input class="form-checkbox__input" type="checkbox" checked />
    <span class="form-checkbox__checkbox"></span>
  </span>
  <span class="form-checkbox__label">
    Checkbox label
  </span>
</label>

<label>
  <span class="form-checkbox">
    <input class="form-checkbox__input" type="checkbox" />
    <span class="form-checkbox__checkbox"></span>
  </span>
  <span class="form-checkbox__label">
    Checkbox label
  </span>
</label>

Radio Buttons

  • Radio Buttons 
  • 
<!-- Default radio buttons -->
<label>
  <span class="form-checkbox">
    <input name="radio-input" class="form-checkbox__input" type="radio" checked />
    <span class="form-checkbox__radio"></span>
  </span>
  <span class="form-checkbox__label">
    Radio label
  </span>
</label>
<label>
  <span class="form-checkbox">
    <input name="radio-input" class="form-checkbox__input" type="radio" />
    <span class="form-checkbox__radio"></span>
  </span>
  <span class="form-checkbox__label">
    Radio label
  </span>
</label>

<!-- Small radio buttons -->
<label>
  <span class="form-checkbox">
    <input name="radio-input-small" class="form-checkbox__input" type="radio" checked />
    <span class="form-checkbox__radio form-checkbox__radio--small"></span>
  </span>
  <span class="form-checkbox__label">
    Radio label
  </span>
</label>
<label>
  <span class="form-checkbox">
    <input name="radio-input-small" class="form-checkbox__input" type="radio" />
    <span class="form-checkbox__radio form-checkbox__radio--small"></span>
  </span>
  <span class="form-checkbox__label">
    Radio label
  </span>
</label>

Text Inputs

  • This is an error message 
  • 
  <label>
    Input label
    <input type="text" placeholder="Input text" />
  </label>

  <label>
    Input label
    <input class="_is-error" type="text" placeholder="Input text" />
  </label>
  <span class="form-msg-error">
    This is an error message
  </span>

Textareas 

  • 
<label>
  Textarea label
  <textarea cols="50" rows="10">
    Textarea text
  </textarea>
</label>