Forms
The Core style set lets you easily construct forms that follow the standard form layout and design.
Note: This documentation assumes that you have an understanding of how HTML forms work. It will not go into detail
as to how forms are constructed, but rather explain the specifics of the Core-related form styles.
Form Wrapper
Form Themes
Standard Form Theme
Form Structure
Form Elements
Text Inputs
Optimizations for Mobile Users
Select Fields
Inputs with Icons
Input Controls
Radio Buttons
Checkboxes
Toggle Switches
Submit Buttons
Dropdown links
Errors
Required and Optional Labels
Disabled Inputs
Status Messages
HTML5 Validation
Troubleshooting
Form Wrapper
To build a standard form, apply the class form
to your form element.
Form wrapper
<form action = "#" class = "form" ></form> <form action="#" class="form"></form>
Form Themes
Apply a form theme with a form-theme-*
class on the form element.
With no specific theme defined, your form will have a transparent background.
Standard Form Theme
This is the standard form theme.
Form with standard theme
<form action = "#" class = "form form-theme-standard" >
<h4> Standard Form </h4>
<fieldset>
<div class = "grid grid-flex gutter-form" >
<div class = "grid-item one-whole" >
<label class = "input-label" for = "standard-label" > Label </label>
<input type = "text" class = "input-text" >
</div>
</div>
</fieldset>
<fieldset>
<div class = "grid grid-flex gutter-form grid-justify-end" >
<div class = "grid-item" >
<input type = "submit" class = "button-primary" value = "Submit" >
</div>
</div>
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<h4>Standard Form</h4>
<fieldset>
<div class="grid grid-flex gutter-form">
<div class="grid-item one-whole">
<label class="input-label" for="standard-label">Label</label>
<input type="text" class="input-text">
</div>
</div>
</fieldset>
<fieldset>
<div class="grid grid-flex gutter-form grid-justify-end">
<div class="grid-item">
<input type="submit" class="button-primary" value="Submit">
</div>
</div>
</fieldset>
</form>
Form Structure
Forms are structured using the grid layout . Use the gutter-form
gutter on your grid to apply the appropriate spacing between form elements.
Basic form using the grid layout
<form action = "#" class = "form form-theme-standard" >
<h3> Demo Form </h3>
<fieldset>
<div class = "grid grid-flex gutter-form" >
<div class = "grid-item one-whole" >
<label class = "input-label" for = "input1" > Label 1 </label>
<div class = "select-container" >
<select id = "input1" class = "select" >
<option> Option </option>
<option> Awption </option>
</select>
</div>
</div>
<div class = "grid-item one-whole" >
<label class = "input-label" for = "input2" > Label 2 </label>
<div class = "input-text-container" >
<input type = "text" id = "input2" class = "input-text" >
</div>
</div>
<div class = "grid-item one-whole" >
<label class = "input-label" for = "input3" > Label 3 </label>
<div class = "input-text-container" >
<input type = "text" id = "input3" class = "input-text" >
</div>
</div>
<div class = "grid-item one-whole" >
<div class = "checkbox-container" >
<input class = "input-checkbox" type = "checkbox" id = "input4" >
<label for = "input4" class = "label-checkbox" > Label 4 </label>
</div>
<div class = "checkbox-container" >
<input class = "input-checkbox" type = "checkbox" id = "input5" >
<label for = "input5" class = "label-checkbox" > Label 5 </label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class = "grid grid-flex gutter-form" >
<div class = "grid-item one-half" >
<label class = "input-label" for = "input6" > Lbl 6 </label>
<div class = "input-text-container" >
<input type = "text" id = "input6" class = "input-text" >
</div>
</div>
<div class = "grid-item one-half" >
<label class = "input-label" for = "input7" > Lbl 7 </label>
<div class = "input-text-container" >
<input type = "text" id = "input7" class = "input-text" >
</div>
</div>
<div class = "grid-item one-half" >
<label class = "input-label" for = "input8" > Lbl 8 </label>
<div class = "input-text-container" >
<input type = "text" id = "input8" class = "input-text" >
</div>
</div>
<div class = "grid-item one-half" >
<label class = "input-label" for = "input9" > Lbl 9 </label>
<div class = "input-text-container" >
<input type = "text" id = "input9" class = "input-text" >
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class = "grid grid-flex gutter-form grid-justify-end" >
<div class = "grid-item" >
<a href = "#" class = "button button-margin-right cancel" > Back </a>
</div>
<div class = "grid-item" >
<input type = "submit" class = "button-primary" value = "Submit" >
</div>
</div>
</fieldset>
</form> <form action="#" class="form form-theme-standard">
<h3>Demo Form</h3>
<fieldset>
<div class="grid grid-flex gutter-form">
<div class="grid-item one-whole">
<label class="input-label" for="input1">Label 1</label>
<div class="select-container">
<select id="input1" class="select">
<option>Option</option>
<option>Awption</option>
</select>
</div>
</div>
<div class="grid-item one-whole">
<label class="input-label" for="input2">Label 2</label>
<div class="input-text-container">
<input type="text" id="input2" class="input-text">
</div>
</div>
<div class="grid-item one-whole">
<label class="input-label" for="input3">Label 3</label>
<div class="input-text-container">
<input type="text" id="input3" class="input-text">
</div>
</div>
<div class="grid-item one-whole">
<div class="checkbox-container">
<input class="input-checkbox" type="checkbox" id="input4">
<label for="input4" class="label-checkbox">Label 4</label>
</div>
<div class="checkbox-container">
<input class="input-checkbox" type="checkbox" id="input5">
<label for="input5" class="label-checkbox">Label 5</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="grid grid-flex gutter-form">
<div class="grid-item one-half">
<label class="input-label" for="input6">Lbl 6</label>
<div class="input-text-container">
<input type="text" id="input6" class="input-text">
</div>
</div>
<div class="grid-item one-half">
<label class="input-label" for="input7">Lbl 7</label>
<div class="input-text-container">
<input type="text" id="input7" class="input-text">
</div>
</div>
<div class="grid-item one-half">
<label class="input-label" for="input8">Lbl 8</label>
<div class="input-text-container">
<input type="text" id="input8" class="input-text">
</div>
</div>
<div class="grid-item one-half">
<label class="input-label" for="input9">Lbl 9</label>
<div class="input-text-container">
<input type="text" id="input9" class="input-text">
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="grid grid-flex gutter-form grid-justify-end">
<div class="grid-item">
<a href="#" class="button button-margin-right cancel">Back</a>
</div>
<div class="grid-item">
<input type="submit" class="button-primary" value="Submit">
</div>
</div>
</fieldset>
</form>
Form Elements
Text Inputs
All text inputs get the class input-text
, and are wrapped in a surrounding input-text-container
.
Additionally, each input
should have a label
that helps the user understand which kind of input is asked from them. Labels should contain no more than one or two words.
If you need to provide additional explanation, use the input-label-helper-text
element.
Place the helper text after the input
in the markup.
Text inputs
<div class = "input-text-container" >
<label class = "input-label" for = "text-input-1" > First name </label>
<input type = "text" id = "text-input-1" class = "input-text" placeholder = "John" value = "" >
<span class = "input-label-helper-text" > Helper text </span>
</div> <div class="input-text-container">
<label class="input-label" for="text-input-1">First name</label>
<input type="text" id="text-input-1" class="input-text" placeholder="John" value="">
<span class="input-label-helper-text">Helper text</span>
</div>
Optimizations for Mobile Users
Try to always use the appropriate input type for the use case to allow mobile phones to choose the best suited keyboard, toggle auto capitalization, etc.
For example, use type="tel"
for phone numbers and type="email"
for email addresses.
If you're uncertain which type to use (such as with house numbers, where type="number"
might be too restrictive), stick with type="text"
.
For more information, follow Apple's "Text Programming Guide for iOS" or this article from treehouse .
Text inputs with specific types
<div class = "input-text-container" >
<label class = "input-label" for = "url-input-1" > Your homepage </label>
<input type = "url" id = "url-input-1" class = "input-text" placeholder = "https://some.page.example/" value = "" >
</div> <div class="input-text-container">
<label class="input-label" for="url-input-1">Your homepage</label>
<input type="url" id="url-input-1" class="input-text" placeholder="https://some.page.example/" value="">
</div>
<div class = "input-text-container" >
<label class = "input-label" for = "url-input-1" > Your homepage </label>
<input type = "url" id = "url-input-1" class = "input-text" placeholder = "https://some.page.example/" value = "" >
</div> <div class="input-text-container">
<label class="input-label" for="url-input-1">Your homepage</label>
<input type="url" id="url-input-1" class="input-text" placeholder="https://some.page.example/" value="">
</div>
<div class = "input-text-container" >
<label class = "input-label" for = "tel-input-1" > Telephone </label>
<input type = "tel" id = "tel-input-1" class = "input-text" placeholder = "+49 123 456789" value = "" >
</div> <div class="input-text-container">
<label class="input-label" for="tel-input-1">Telephone</label>
<input type="tel" id="tel-input-1" class="input-text" placeholder="+49 123 456789" value="">
</div>
Select Fields
Select fields get the class select
and are wrapped in a select-container
element.
Select fields
<div class = "select-container" >
<label class = "input-label" for = "main-ingredient" > Main ingredient </label>
<div class = "select-input-wrapper" >
<select id = "main-ingredient" class = "select" >
<optgroup label = "Fruit" >
<option> Apples </option>
<option> Bananas </option>
<option> Carrots </option>
</optgroup>
<optgroup label = "Vegetables!" >
<option> Potatoes </option>
<option> Radishes </option>
</optgroup>
</select>
</div>
</div> <div class="select-container">
<label class="input-label" for="main-ingredient">Main ingredient</label>
<div class="select-input-wrapper">
<select id="main-ingredient" class="select">
<optgroup label="Fruit">
<option>Apples</option>
<option>Bananas</option>
<option>Carrots</option>
</optgroup>
<optgroup label="Vegetables!">
<option>Potatoes</option>
<option>Radishes</option>
</optgroup>
</select>
</div>
</div>
Main ingredient
Apples
Bananas
Carrots
Potatoes
Radishes
Inputs with Icons
You can place icons on text inputs and select fields to provide an additional hint about what type of input is required.
To place an icon, insert the appropriate icon element before the input field and apply either input-icon-left
or input-icon-right
.
Make sure to place the icon before the actual form field so that the input field can reserve the appropriate space.
Text input with icons
<div class = "input-text-container" >
<label class = "input-label" for = "text-input-2" > Not allowed </label>
<span class = "input-icon-left is24-icon-profile" ></span>
<span class = "input-icon-right is24-icon-remove-glyph" ></span>
<input type = "text" id = "text-input-2" class = "input-text" placeholder = "Homers" value = "" >
</div> <div class="input-text-container">
<label class="input-label" for="text-input-2">Not allowed</label>
<span class="input-icon-left is24-icon-profile"></span>
<span class="input-icon-right is24-icon-remove-glyph"></span>
<input type="text" id="text-input-2" class="input-text" placeholder="Homers" value="">
</div>
Select field with icons
<div class = "select-container" >
<label class = "input-label" for = "pay-with" > Pay with </label>
<div class = "select-input-wrapper" >
<span class = "input-icon-left is24-icon-payment-cash" ></span>
<select id = "pay-with" class = "select" >
<option> Cash </option>
<option> Credit card </option>
<option> Cheque </option>
</select>
</div>
</div> <div class="select-container">
<label class="input-label" for="pay-with">Pay with</label>
<div class="select-input-wrapper">
<span class="input-icon-left is24-icon-payment-cash"></span>
<select id="pay-with" class="select">
<option>Cash</option>
<option>Credit card</option>
<option>Cheque</option>
</select>
</div>
</div>
Input Controls
Input controls are radio buttons, checkboxes, and toggle switches. Each of these is comprised of a container element, the input itself, and the corresponding label.
Collections of input controls can be shown in two styles: The default style, where each input stands by itself, and a long-list style, which helps readability in long lists of inputs.
Note: Make sure to provide proper labels to all of your controls, otherwise users will not be able to interact with them. Also, place your input
before your label
, otherwise the checkbox will not be clickable.
Radio Buttons
Create a radio button with the input-radio
, label-radio
, and radio-container
elements.
Optionally, apply the radio-list
class on the surrounding list to use the long-list format.
Radio buttons, default and long-list style
<ul>
<li class = "radio-container" >
<input type = "radio" class = "input-radio" id = "apple-1" name = "fruit-1" checked = "" >
<label for = "apple-1" class = "label-radio" > Apple </label>
</li>
<li class = "radio-container" >
<input type = "radio" class = "input-radio" id = "banana-1" name = "fruit-1" >
<label for = "banana-1" class = "label-radio" > Banana </label>
</li>
</ul> <ul>
<li class="radio-container">
<input type="radio" class="input-radio" id="apple-1" name="fruit-1" checked="">
<label for="apple-1" class="label-radio">Apple</label>
</li>
<li class="radio-container">
<input type="radio" class="input-radio" id="banana-1" name="fruit-1">
<label for="banana-1" class="label-radio">Banana</label>
</li>
</ul>
<ul class = "radio-list" >
<li class = "radio-container" >
<input type = "radio" class = "input-radio" id = "apple-2" name = "fruit-2" checked = "" >
<label for = "apple-2" class = "label-radio" > Apple </label>
</li>
<li class = "radio-container" >
<input type = "radio" class = "input-radio" id = "banana-2" name = "fruit-2" >
<label for = "banana-2" class = "label-radio" > Banana </label>
</li>
</ul> <ul class="radio-list">
<li class="radio-container">
<input type="radio" class="input-radio" id="apple-2" name="fruit-2" checked="">
<label for="apple-2" class="label-radio">Apple</label>
</li>
<li class="radio-container">
<input type="radio" class="input-radio" id="banana-2" name="fruit-2">
<label for="banana-2" class="label-radio">Banana</label>
</li>
</ul>
Checkboxes
Create a checkbox with the input-checkbox
, label-checkbox
, and checkbox-container
elements.
Optionally, apply the checkbox-list
class on the surrounding list to use the long-list format.
Checkboxes, default and long-list style
<div class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "pears-1" checked = "" >
<label for = "pears-1" class = "label-checkbox" > Pears </label>
</div>
<div class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "cheese-1" >
<label for = "cheese-1" class = "label-checkbox" > Cheese </label>
</div>
<div class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "car-battery-1" >
<label for = "car-battery-1" class = "label-checkbox" > Car battery </label>
</div> <div class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="pears-1" checked="">
<label for="pears-1" class="label-checkbox">Pears</label>
</div>
<div class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="cheese-1">
<label for="cheese-1" class="label-checkbox">Cheese</label>
</div>
<div class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="car-battery-1">
<label for="car-battery-1" class="label-checkbox">Car battery</label>
</div>
<ul class = "checkbox-list" >
<li class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "pears-2" checked = "" >
<label for = "pears-2" class = "label-checkbox" ><span> Pears </span></label>
</li>
<li class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "cheese-2" >
<label for = "cheese-2" class = "label-checkbox" > Cheese </label>
</li>
<li class = "checkbox-container" >
<input type = "checkbox" class = "input-checkbox" id = "car-battery-2" >
<label for = "car-battery-2" class = "label-checkbox" > Car battery </label>
</li>
</ul> <ul class="checkbox-list">
<li class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="pears-2" checked="">
<label for="pears-2" class="label-checkbox"><span>Pears</span></label>
</li>
<li class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="cheese-2">
<label for="cheese-2" class="label-checkbox">Cheese</label>
</li>
<li class="checkbox-container">
<input type="checkbox" class="input-checkbox" id="car-battery-2">
<label for="car-battery-2" class="label-checkbox">Car battery</label>
</li>
</ul>
Toggle Switches
Create a toggle switch with the input-toggle-switch
, label-toggle-switch
, and toggle-switch-container
elements.
Optionally, apply the toggle-switch-list
class on the surrounding list to use the long-list format.
Toggle switches, default and long-list style
<div class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "newly-renovated-1" checked = "" >
<label for = "newly-renovated-1" class = "label-toggle-switch" > Newly renovated </label>
</div>
<div class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "balcony-1" >
<label for = "balcony-1" class = "label-toggle-switch" > Balcony </label>
</div>
<div class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "garage-1" >
<label for = "garage-1" class = "label-toggle-switch" > Garage </label>
</div> <div class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="newly-renovated-1" checked="">
<label for="newly-renovated-1" class="label-toggle-switch">Newly renovated</label>
</div>
<div class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="balcony-1">
<label for="balcony-1" class="label-toggle-switch">Balcony</label>
</div>
<div class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="garage-1">
<label for="garage-1" class="label-toggle-switch">Garage</label>
</div>
<ul class = "toggle-switch-list" >
<li class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "newly-renovated-2" checked = "" >
<label for = "newly-renovated-2" class = "label-toggle-switch" > Newly renovated </label>
</li>
<li class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "balcony-2" >
<label for = "balcony-2" class = "label-toggle-switch" > Balcony </label>
</li>
<li class = "toggle-switch-container" >
<input type = "checkbox" class = "input-toggle-switch" id = "garage-2" >
<label for = "garage-2" class = "label-toggle-switch" > Garage </label>
</li>
</ul> <ul class="toggle-switch-list">
<li class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="newly-renovated-2" checked="">
<label for="newly-renovated-2" class="label-toggle-switch">Newly renovated</label>
</li>
<li class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="balcony-2">
<label for="balcony-2" class="label-toggle-switch">Balcony</label>
</li>
<li class="toggle-switch-container">
<input type="checkbox" class="input-toggle-switch" id="garage-2">
<label for="garage-2" class="label-toggle-switch">Garage</label>
</li>
</ul>
Submit Buttons
You can use any of the globally available buttons as form submit buttons. Please see the
Buttons section for more information.
Form with submit button
<form action = "#" class = "form form-theme-standard" >
<div class = "grid grid-flex gutter-form" >
<div class = "grid-item one-whole" >
<label for = "credit-card-number-1" class = "input-label" > Credit Card Number </label>
<input id = "credit-card-number-1" type = "text" class = "input-text" >
</div>
</div>
<div class = "grid grid-flex gutter-form grid-justify-end" >
<div class = "grid-item" >
<a href = "#" class = "cancel button button-margin-right" title = "Go back to the previous step" > Back </a>
<input type = "submit" class = "button-primary" value = "Submit" >
</div>
</div>
</form> <form action="#" class="form form-theme-standard">
<div class="grid grid-flex gutter-form">
<div class="grid-item one-whole">
<label for="credit-card-number-1" class="input-label">Credit Card Number</label>
<input id="credit-card-number-1" type="text" class="input-text">
</div>
</div>
<div class="grid grid-flex gutter-form grid-justify-end">
<div class="grid-item">
<a href="#" class="cancel button button-margin-right" title="Go back to the previous step">Back</a>
<input type="submit" class="button-primary" value="Submit">
</div>
</div>
</form>
Dropdown Links
You can use select lists as dropdown links when there is no further action required to confirm the
selection. A good example of such a use case would be sorting, where a sorting option needs to be
selected to get an ordered list.
Dropdown links have a select
which is wrapped in a surrounding
div.dropdown-link
.
Additionally, you can add an icon to the dropdown by adding a span with class dropdown-link-icon
along with font-icon classes (like is24-icon-* and icon-*) .
Dropdown link
<div class = "dropdown-link" >
<select>
<option> Select Option 1 </option>
<option> Select Option 2 </option>
<option> Select Option 3 </option>
</select>
</div> <div class="dropdown-link">
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
<option>Select Option 3</option>
</select>
</div>
Select Option 1
Select Option 2
Select Option 3
Dropdown link with icon
<div class = "dropdown-link dropdown-link-with-icon" >
<span class = "dropdown-link-icon is24-icon-share-glyph" ></span>
<select>
<option> Select Option 1 </option>
<option> Select Option 2 </option>
<option> Select Option 3 </option>
</select>
</div> <div class="dropdown-link dropdown-link-with-icon">
<span class="dropdown-link-icon is24-icon-share-glyph"></span>
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
<option>Select Option 3</option>
</select>
</div>
Select Option 1
Select Option 2
Select Option 3
If you have very little space to work with, you can hide the text labels and show only the icon using the dropdown-link-icon-only
class.
You can also apply this behavior only to small devices with palm-dropdown-link-icon-only
.
Dropdown link without text
<div class = "dropdown-link dropdown-link-icon-only" >
<span class = "dropdown-link-icon is24-icon-share-glyph" ></span>
<select>
<option> Select Option 1 </option>
<option> Select Option 2 </option>
<option> Select Option 3 </option>
</select>
</div> <div class="dropdown-link dropdown-link-icon-only">
<span class="dropdown-link-icon is24-icon-share-glyph"></span>
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
<option>Select Option 3</option>
</select>
</div>
Select Option 1
Select Option 2
Select Option 3
Dropdown link without text on mobile
<div class = "dropdown-link palm-dropdown-link-icon-only" >
<span class = "dropdown-link-icon is24-icon-share-glyph" ></span>
<select>
<option> Select Option 1 </option>
<option> Select Option 2 </option>
<option> Select Option 3 </option>
</select>
</div> <div class="dropdown-link palm-dropdown-link-icon-only">
<span class="dropdown-link-icon is24-icon-share-glyph"></span>
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
<option>Select Option 3</option>
</select>
</div>
Select Option 1
Select Option 2
Select Option 3
Errors
Highlight faulty input by adding the error
class to an input field.
Inputs with errors
<label for = "input-error" class = "input-label" > Label </label>
<input id = "input-error" type = "text" class = "input-text error" > <label for="input-error" class="input-label">Label</label>
<input id="input-error" type="text" class="input-text error">
<div class = "select-container" >
<label for = "select-error" class = "input-label" > Label </label>
<div class = "select-input-wrapper" >
<select id = "select-error" class = "select error" >
<option> Option 1 </option>
<option> Option 2 </option>
</select>
</div>
</div> <div class="select-container">
<label for="select-error" class="input-label">Label</label>
<div class="select-input-wrapper">
<select id="select-error" class="select error">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<div class = "radio-container" >
<input type = "radio" id = "error-radio" class = "input-radio error" >
<label for = "error-radio" class = "label-radio error" > Label </label>
</div> <div class="radio-container">
<input type="radio" id="error-radio" class="input-radio error">
<label for="error-radio" class="label-radio error">Label</label>
</div>
<div class = "checkbox-container" >
<input type = "checkbox" id = "error-checkbox" class = "input-checkbox error" >
<label for = "error-checkbox" class = "label-checkbox error" > I hereby give up control of my private data in service of a greater purpose </label>
</div> <div class="checkbox-container">
<input type="checkbox" id="error-checkbox" class="input-checkbox error">
<label for="error-checkbox" class="label-checkbox error">I hereby give up control of my private data in service of a greater purpose</label>
</div>
Required and Optional Labels
Mark required and optional inputs with the label-required
and label-optional
classes, respectively.
Note that required inputs do not get their own visual designation because required inputs are the norm, while optional inputs appear less often.
Required Label
<label for = "a-required-input" class = "input-label label-required" >
Something important
</label>
<input type = "text" required = "" id = "a-required-input" class = "input-text" > <label for="a-required-input" class="input-label label-required">
Something important
</label>
<input type="text" required="" id="a-required-input" class="input-text">
Optional Label
<label for = "an-optional-input" class = "input-label label-optional" >
Something unimportant
</label>
<input type = "text" id = "an-optional-input" class = "input-text" > <label for="an-optional-input" class="input-label label-optional">
Something unimportant
</label>
<input type="text" id="an-optional-input" class="input-text">
Disabled Inputs
For the sake of usability, please do not deactivate form inputs. Make sure all of your input fields are usable.
Status Messages
To give feedback to the user, use one of the status messages .
Form with error message
<div class = "status-message status-error margin-bottom-s" >
<h4> Error </h4>
<p>
The email address you provided appears to be incorrect.
</p>
</div> <div class="status-message status-error margin-bottom-s">
<h4>Error</h4>
<p>
The email address you provided appears to be incorrect.
</p>
</div>
Error
The email address you provided appears to be incorrect.
HTML5 Validation
We recommend to use the HTML5 Constraint Validation API to validate a user's form input on the client side.
Form with HTML5 Contraint Validation
Troubleshooting
Why is my radio button, checkbox, or toggle switch not clickable?
Linking label and input control via id
and for
makes the label area clickable.
Still not clickable? Make sure your input
appears before your label
.