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.

  1. Form Wrapper
  2. Form Themes
    1. Standard Form Theme
  3. Form Structure
  4. Form Elements
    1. Text Inputs
      1. Optimizations for Mobile Users
    2. Select Fields
    3. Inputs with Icons
    4. Input Controls
      1. Radio Buttons
      2. Checkboxes
      3. Toggle Switches
    5. Submit Buttons
    6. Errors
    7. Required and Optional Labels
    8. Disabled Inputs
  5. Status Messages
  6. HTML5 Validation

Form Wrapper

To build a standard form, apply the class form to your form element.

Form wrapper 

				

				

					

						

					

				

			

		

	


	

		
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

				

					

						

					

					

						

							

								
Standard 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

			

				

					

				

				

					

						

							
Demo Form

							

								

									

										
										

											
										

									

									

										
										

											
										

									

									

										
										

											
										

									

									

										

											
											
										

										

											
											
										

									

								

							

							

								

									

										
										

											
										

									

									

										
										

											
										

									

									

										
										

											
										

									

									

										
										

											
										

									

								

							

							

								

									

										Back
									

									

										
									

								

							

						

					

				

			

		

	


	

		
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

				

					

						

					

					

						

							

								
								
								Helper text
							

						

					

				

			


			

				
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

					

						

							

						

						

							

								

									
									
								

							

						

					

					

						

							

						

						

							

								

									
									
								

							

						

					

					

						

							

						

						

							

								

									
									
								

							

						

					

				

			

		


		

			
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>
  <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>


					

					

						

							

								
								
							

						

					

				

			

		


		

			
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

				

					

						

					

					

						

							

								
								
								
								
							

						

					

				

			


			

				
Select field with icons

				

					

						

					

					

						

							

								
								
								
							

						

					

				

			

		


		

			
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.
			


			

				
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 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

					

						

							

						

						

							

								

									
									
								

								

									
									
								

								

									
									
								

							

						

					

					

						

							

						

						

							

								
    
									
  • 
										
										
									
    • 
									
  • 
										
										
									
    • 
									
  • 
										
										
									
    • 
								

							

						

					

				

			


			

				
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

					

						

							

						

						

							

								

									
									
								

								

									
									
								

								

									
									
								

							

						

					

					

						

							

						

						

							

								
    
									
  • 
										
										
									
    • 
									
  • 
										
										
									
    • 
									
  • 
										
										
									
    • 
								

							

						

					

				

			

		


		

			
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

				

					

						

					

					

						

							

								

									

										
										
									

								

								

									

										Back
										
									

								

							

						

					

				

			

		


		

			
Errors

			

				Highlight faulty input by adding the error class to an input field or label.
			


			

				
Inputs with errors

				

					


<label for="input-error" class="input-label error" >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>
  <select id="select-error" class="select error">
    <option>Option</option>
  </select>
</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

				

					

						

					

					

						

							
							
						

					

				

			


			

				
Optional Label

				

					

						

					

					

						

							
							
						

					

				

			

		


		

			
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

			

				

					

				

				

					

						

							
Error

							

								The email address you provided appears to be incorrect.
							

						

					

					

						
Erroneous Form Data

						

							

								

									
									
								

								

									
								

							

						

					

				

			

		

	


	

		
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

			

				
A Form

				

					

						

							
							

								
							

						

					

					

						

							
							

								
								
The thing that people you know call you by