Skip to content

Forms

CSS classes for styling HTML form elements

Usage

Text Inputs

Text inputs will generally use the g-form-input class. There are also classes to modify the input size:

  • Small: g-form-input-small
  • Large: g-form-input-large

HTML Structure

Standard Text Input

<label class="g-form-label" for="l-Something">Something</label>
<input id="l-Something" class="g-form-input" type="text" name="Something">

Small Text Input

<label class="g-form-label" for="l-Something">Something</label>
<input id="l-Something" class="g-form-input-small" type="text" name="Something">

Large Text Input

<label class="g-form-label" for="l-Something">Something</label>
<input id="l-Something" class="g-form-input-large" type="text" name="Something">

Textareas

A textarea uses the g-form-input and g-form-input--long modifier class.

HTML Structure

<label class="g-form-label" for="l-Something">Something</label>
<textarea id="l-Something" class="g-form-input g-form-input--long"></textarea>

Checkboxes

Checkbox inputs utilize the following classes:

  • g-form-checkbox - Apply to the parent element of the checkbox input, typically a label
  • g-form-checkbox__input - Apply to checkbox input element
  • g-form-checkbox__caption - Apply to checkbox input sibling, contains the text or label copy for the input

HTML Structure

<label class="g-form-checkbox">
    <input class="g-form-checkbox__input" type="checkbox">
    <span class="g-form-checkbox__caption">Unselected</span>
</label>

<label class="g-form-checkbox">
    <input class="g-form-checkbox__input" type="checkbox" checked>
    <span class="g-form-checkbox__caption">Selected</span>
</label>

<label class="g-form-checkbox">
    <input class="g-form-checkbox__input" type="checkbox" disabled>
    <span class="g-form-checkbox__caption">Disabled</span>
</label>

Radios

Radio inputs utilize the following classes:

  • g-form-radio - Apply to the parent element of the radio input, typically a label
  • g-form-checkbox__input - Apply to radio input element
  • g-form-checkbox__caption - Apply to radio input sibling, contains the text or label copy for the input

HTML Structure

<label class="g-form-radio">
    <input class="g-form-checkbox__input" type="radio" name="radio_name">
    <span class="g-form-checkbox__caption">Unselected</span>
</label>

<label class="g-form-radio">
    <input class="g-form-checkbox__input" type="radio" name="radio_name" checked>
    <span class="g-form-checkbox__caption">Selected</span>
</label>

<label class="g-form-radio">
    <input class="g-form-checkbox__input" type="radio" name="radio_name" disabled>
    <span class="g-form-checkbox__caption">Disabled</span>
</label>

Toggles

Toggles utilize the following classes:

  • g-form-toggle - Apply to the parent element of the toggle input, typically a label
  • g-form-checkbox__input - Apply to toggle input element
  • g-form-checkbox__caption - Apply to toggle input sibling, contains the text or label copy for the input

HTML Structure

<label class="g-form-toggle">
    <input class="g-form-checkbox__input" type="checkbox">
    <span class="g-form-checkbox__caption">Unselected</span>
</label>

<label class="g-form-toggle">
    <input class="g-form-checkbox__input" type="checkbox" checked>
    <span class="g-form-checkbox__caption">Selected</span>
</label>

<label class="g-form-toggle">
    <input class="g-form-checkbox__input" type="checkbox" disabled>
    <span class="g-form-checkbox__caption">Disabled</span>
</label>

Selects will generally use the g-form-select__dropdown class, with its parent having a class of g-form-select.

There are two types of Dropdowns

  • Normal: g-form-select__dropdown
  • Display Style: g-form-select__dropdown-display (This is usually used for Per Page/ Sorting)

For elements you can't control (like the MVT Items that output the select), please see Dynamic Form Element Attributes.

HTML Structure

<div class="g-form-select">
    <select id="l-Something" class="g-form-select__dropdown" name="Something">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<div class="g-form-select">
    <select id="l-SomethingElse" class="g-form-select__dropdown-display" name="SomethingElse">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>