Form elements include labels, text fields, text areas, dropdowns, etc.
.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>
.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>
.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>
.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>
.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>
.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>
.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>
.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>
.wb-error-label
Use this to indicate an error on forms with a blue background.
<div class='wb-error-label'>Oh no, you have made a terrible mistake!</div>
.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).
<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>
.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>
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>