Form Labels
Use the .formLabel
class to get our custom styling for form labels.
<form>
<label class="formLabel">Your email</label>
<label class="formLabel">Your email <span class="u-txtQuiet">(optional)</span></label>
</form>
Use the .formLabel
class to get our custom styling for form labels.
<form>
<label class="formLabel">Your email</label>
<label class="formLabel">Your email <span class="u-txtQuiet">(optional)</span></label>
</form>
Use the .formControl
class to get default styling for text inputs.
Text inputs are always paired with a label to give users context. Placeholder
text is used for additional context when necessary.
Keep in mind, formControl
spans a width of 100% by default.
<form>
<label class="formLabel">Add your name</label>
<input class="formControl" type="text">
</form>
When necessary, place additional helper text beneath inputs in a label with a .form-helper class.
<form>
<label class="formLabel">Add your website</label>
<input class="formControl" type="url">
<label class="u-txtQuiet u-txtSmall">Please include http://</label>
</form>
Textarea’s also use the .formControl
class.
<form>
<label class="formLabel">Add a Comment</label>
<textarea class="formControl"></textarea>
</form>
Extend the .formControl
class with .formControl--select
to get default styling
for select fields. Optionally, use a form label above your select if the
default text is not descriptive enough, if the default is one of the
valid select options, or if the selection will be saved and viewable again
later.
<form>
<select class="formControl formControl--select">
<option value="" selected disabled>How are you feeling?</option>
<option value="amazing">Amazing</option>
<option value="boring">Boring</option>
<option value="fun">Fun</option>
</select>
</form>
Wrap a radio input with a label element and give it a class of .formRadio
.
Make them inline by adding the .formInline
class on the form element.
<form>
<label class="formRadio">
<input id="visa" name="cardtype" type="radio">
VISA
</label>
<label class="formRadio">
<input id="mastercard" name="cardtype" type="radio">
Mastercard
</label>
<label class="formRadio">
<input id="amex" name="cardtype" type="radio">
AMEX
</label>
</form>
<p>Make them inline by adding the <code>.formInline</code> class on the form element.</p>
<form class="formInline">
<label class="formRadio">
<input id="visa" name="cardtype" type="radio">
VISA
</label>
<label class="formRadio">
<input id="mastercard" name="cardtype" type="radio">
Mastercard
</label>
<label class="formRadio">
<input id="amex" name="cardtype" type="radio">
AMEX
</label>
</form>
Wrap a checkbox input with a label element and give it a class of .formCheck
.
Make them inline by adding the .formInline
class on the form element.
<form>
<label class="formCheck">
<input id="visa2" name="cardtype2" type="checkbox">
VISA
</label>
<label class="formCheck">
<input id="mastercard2" name="cardtype2" type="checkbox">
Mastercard
</label>
<label class="formCheck">
<input id="amex2" name="cardtype2" type="checkbox">
AMEX
</label>
</form>
<p>Make them inline by adding the <code>.formInline</code> class on the form element.</p>
<form class="formInline">
<label class="formCheck">
<input id="visa2" name="cardtype2" type="checkbox">
VISA
</label>
<label class="formCheck">
<input id="mastercard2" name="cardtype2" type="checkbox">
Mastercard
</label>
<label class="formCheck">
<input id="amex2" name="cardtype2" type="checkbox">
AMEX
</label>
</form>
Add the disabled
boolean attribute on an input to prevent user interactions. Disabled items appear lighter and add a not-allowed cursor.
For just the look of disabled, use the is-disabled
class.
<form>
<fieldset class="u-mb4">
<label class="formLabel" for="sFirstName">First Name</label>
<input id="sFirstName" class="formControl" name="sFirstName" type="text" required disabled>
</fieldset>
<fieldset class="u-mb4">
<select class="formControl formControl--select" name="iEmployees" disabled>
<option value="" selected disabled>Select number of users</option>
<option value="7">100+</option>
<option value="6">51-99</option>
<option value="9">6-50</option>
<option value="2">1-5</option>
</select>
</fieldset>
<fieldset class="u-mb4">
<button class="button button--primary" type="submit" disabled>Submit</button>
</fieldset>
</form>
<form>
<fieldset class="u-mb4">
<label class="formLabel" for="sFirstName2">First Name</label>
<input id="sFirstName2" class="formControl is-valid" name="sFirstName2" type="email" required>
</fieldset>
<fieldset class="u-mb4">
<select class="formControl formControl--select" name="iEmployees2" required>
<option value="" selected disabled>Select number of users</option>
<option value="7">100+</option>
<option value="6">51-99</option>
<option value="9">6-50</option>
<option value="2">1-5</option>
</select>
</fieldset>
<fieldset class="u-mb4">
<button class="button button--primary" type="submit">Submit</button>
</fieldset>
</form>