Form

Form elements include labels, text fields, text areas, dropdowns, etc.

Class .wb-label .wb-input-field .wb-label--required

Use an input field to accept short input from a user. You can control the width by setting it on the containing <div>. If a field is required, be sure to add .wb-label--required.

Helper text can be styled with our text related classes such as .wb-text, .wb-text--muted, .wb-text--small, etc etc.

Some help text

<label class='wb-label wb-label--required' for='floop'>field label</label>
<input class='wb-input-field' type='text' id='floop' name='floop' placeholder='Preview text'></input>
<p class='wb-text'>Some help text</p>

Modifier .wb-input-field--no-outline

To style a read-only input field, .wb-input-field--no-outline may be applied.

A read-only field has no obvious styling difference from a regular input field so this modifier may be helpful when you want to make it clear to the user the field is not editable.

<label class='wb-label' for='bloop'>read-only field with no outline modifier</label>
<input class='wb-input-field wb-input-field--no-outline' id='bloop' readonly='true' type='text' value='papel@school.com'></input>

Class .wb-textarea

Use a text area to accept longer input from a user. The height is determined by the number of rows.

Some help text

<label class='wb-label' for='bloop'>field label</label>
<textarea class='wb-textarea' rows='5' type='text' id='bloop' name='bloop' placeholder='Preview text'></textarea>
<p class='wb-text'>Some help text</p>

Class .wb-checkbox .wb-checkbox--disabled .wb-checkbox__input

Use a checkbox field to accept boolean input from a user. If a checkbox field is disabled, be sure to add .wb-checkbox--disabled.

The .wb-checkbox style should only be applied to a <label>, and .wb-checkbox__input should be applied to the input itself. Note that .wb-checkbox__input most of the time should have an immediate parent that is a .wb-checkbox, but sometimes that is not possible. In that case, the input and label is linked via the id and for property. This usually happens when you want to put the checkbox on a list.

Checkbox with wrapping wb-checkbox

Checkbox without wrapping wb-checkbox

<p class='wb-text wb-text--muted'>Checkbox with wrapping wb-checkbox</p>
<div>
  <label class='wb-checkbox'>
    <input type='checkbox' class='wb-checkbox__input' />A regular checkbox
  </label>
</div>
<div>
  <label class='wb-checkbox wb-checkbox--disabled'>
    <input type='checkbox' class='wb-checkbox__input' disabled />Disabled checkbox
  </label>
</div>
<div>
  <label class='wb-checkbox'>
    <input type='checkbox' class='wb-checkbox__input' />Checkbox with <br />two lines of text
  </label>
</div>
<p class='wb-text wb-text--muted wb-u-margin-t-6'>Checkbox without wrapping wb-checkbox</p>
<ul class='wb-list wb-list--empty'>
  <li>
    <input type='checkbox' class='wb-checkbox__input' id='all-veggies' />
    <label for='all-veggies'>All Veggies</label>
  </li>
  <li>
    <input type='checkbox' class='wb-checkbox__input' id='all-fruit' />
    <label for='all-fruit'>All Fruit</label>
    <ul class='wb-list wb-list--empty wb-u-margin-l-4 wb-u-margin-t-1'>
      <li>
        <input type='checkbox' class='wb-checkbox__input' id='strawberries' />
        <label for='strawberries'>Strawberries</label>
      </li>
    <li>
       <input type='checkbox' class='wb-checkbox__input' id='watermelon' />
       <label for='watermelon'>Watermelon</label>
     </li>
    </ul>
  </li>
</ul>

Class .wb-radio .wb-radio--disabled .wb-radio__input

Use radio buttons to accept multiple choice input from a user. If a radio button is disabled, be sure to add .wb-radio--disabled.

The .wb-radio style should only be applied to a <label>, and .wb-radio__input should be applied to the input itself.

<div>
  <label class='wb-radio'>
    <input type='radio' name='buttonz' class='wb-radio__input' />Reese's
  </label>
</div>
<div>
  <label class='wb-radio'>
    <input type='radio' name='buttonz' class='wb-radio__input' />Mr. Goodbar
  </label>
</div>
<div>
  <label class='wb-radio wb-radio--disabled'>
    <input type='radio' name='buttonz' class='wb-radio__input' disabled />Nutterbutter
  </label>
</div>
<div>
  <label class='wb-radio'>
    <input type='radio' name='buttonz' class='wb-radio__input'  />Almond Joy <br />is pure joy
  </label>
</div>

Class .wb-dropdown .wb-dropdown__select

Use this field to give a user a list of options to select from.

Some help text

<label class='wb-label' for='moop'>field label</label>
<div class='wb-dropdown'>
  <select class='wb-dropdown__select' id='moop' name='moop'>
    <option value='value_1'>Value 1</option>
    <option value='value_2'>Value 2</option>
    <option value='value_3'>Value 3</option>
  </select>
</div>
<p class='wb-text'>Some help text</p>

Class .wb-form-group

Use .wb-form-group to create vertical spacing between form elements.

<div class='wb-form-group'>
  <label class='wb-label' for='koop'>Field 1</label>
  <input class='wb-input-field' type='text' id='koop' name='koop' placeholder='Preview text'></input>
</div>
<div class='wb-form-group'>
  <label class='wb-label' for='loop'>Field 2</label>
  <input class='wb-input-field' type='text' id='loop' name='loop' placeholder='Preview text'></input>
</div>
<div class='wb-form-group'>
  <label class='wb-label' for='moop'>Field 3</label>
  <div class='wb-dropdown'>
    <select class='wb-dropdown__select' id='moop' name='moop'>
      <option value='value_1'>Value 1</option>
      <option value='value_2'>Value 2</option>
      <option value='value_3'>Value 3</option>
    </select>
  </div>
</div>

Class .wb-field--error

Use .wb-field--error when a user needs to correct their input in a form field. For text fields, .wb-field--error should applied directly the <input> element and for selects, it should be applied onto the <select> element.

Oh no, there was a problem!

Please select something!

<label class='wb-label' for='sloop'>field label</label>
<input class='wb-input-field wb-field--error' type='text' id='sloop' name='sloop' placeholder='Preview text'></input>
<p class='wb-text wb-text--error'>Oh no, there was a problem!</p>
<label class='wb-label' for='moop'>field label</label>
<div class='wb-dropdown'>
  <select class='wb-dropdown__select wb-field--error' id='moop' name='moop'>
    <option value='value_1'>Value 1</option>
    <option value='value_2'>Value 2</option>
    <option value='value_3'>Value 3</option>
  </select>
</div>
<p class='wb-text wb-text--error'>Please select something!</p>

Class .wb-error-label

Use this to indicate an error on forms with a blue background.

Oh no, you have made a terrible mistake!
<div class='wb-error-label'>Oh no, you have made a terrible mistake!</div>

Class .wb-text.wb-text--inverse (on parent)

Applying .wb-text.wb-text--inverse to the parent container will reverse all the label and helper text colors. Use .wb-error-label for any error messages (displayed above the form).

Something went wrong!!
<div class='wb-error-label wb-u-margin-b-4'>Something went wrong!!</div>
<div class='wb-text wb-text--inverse'>
  <div class='wb-form-group'>
    <label class='wb-label' for='doop'>Field 1</label>
    <input class='wb-input-field' type='text' id='doop' name='doop' placeholder='Preview text'></input>
  </div>
  <div class='wb-form-group'>
    <label class='wb-label' for='coop'>Field 2</label>
    <input class='wb-input-field' type='text' id='coop' name='coop' placeholder='Preview text'></input>
  </div>
  <div class='wb-form-group'>
    <label class='wb-label' for='goop'>Field 3</label>
    <div class='wb-dropdown'>
      <select class='wb-dropdown__select' id='goop' name='goop'>
        <option value='value_1'>Value 1</option>
        <option value='value_2'>Value 2</option>
        <option value='value_3'>Value 3</option>
      </select>
    </div>
  </div>
</div>

Modifier .wb-input-field--small .wb-dropdown--small

Makes the input field and dropdown smaller in vertical height. Often used when you need to put the form elements in a table row.

<div class='wb-form-group'>
  <input class='wb-input-field wb-input-field--small' type='text' id='goot' name='goot' placeholder='Preview text'></input>
</div>
<div class='wb-form-group'>
  <div class='wb-dropdown wb-dropdown--small'>
    <select class='wb-dropdown__select' id='moop' name='moop'>
      <option value='value_1'>Value 1</option>
      <option value='value_2'>Value 2</option>
      <option value='value_3'>Value 3</option>
    </select>
  </div>
</div>

Modifier disabled .wb-checkbox--disabled .wb-radio--disabled .wb-dropdown--disabled

Input fields and text areas with disabled attribute will get the disabled style applied automatically. Checkboxes and radios need .wb-checkbox--disabled and .wb-radio--disabled applied to the wrapping <label>, while dropdowns need .wb-dropdown--disabled applied to the wrapping <div>.

<div class='wb-form-group'>
  <input class='wb-input-field' type='text' id='doot' name='doot' placeholder='Preview text' disabled></input>
</div>
<div class='wb-form-group'>
  <div class='wb-dropdown wb-dropbox--disabled'>
    <select class='wb-dropdown__select' id='moop' name='moop' disabled>
      <option value='value_1'>Value 1</option>
      <option value='value_2'>Value 2</option>
      <option value='value_3'>Value 3</option>
    </select>
  </div>
</div>
<div class='wb-form-group'>
  <textarea class='wb-textarea' rows='5' type='text' id='goot' name='goot' placeholder='Preview text' disabled></textarea>
</div>
<div>
  <label class='wb-radio wb-radio--disabled'>
    <input type='radio' name='buttonzz' class='wb-radio__input' disabled/>
    Disabled radio
  </label>
</div>
<div>
  <label class='wb-radio wb-radio--disabled'>
    <input type='radio' name='buttonzz' class='wb-radio__input' disabled checked/>
    Disabled but selected radio
  </label>
</div>
<div>
  <label class='wb-checkbox wb-checkbox--disabled'>
    <input type='checkbox' class='wb-checkbox__input' disabled/>
    Disabled checkbox
  </label>
</div>
<div>
  <label class='wb-checkbox wb-checkbox--disabled'>
    <input type='checkbox' class='wb-checkbox__input' disabled checked/>
    Disabled but checked checkbox
  </label>
</div>