LP6 Style Guide: Inputs

HTML Code Snippet

				
	<div class="form-item">
		<label for="my_FirstName" class="label">Label: First Name</label>
			<div class="text-input-field-wrapper">
				<input name="firstName" placeholder="First Name" id="my_FirstName" type="text" value="" maxlength="255" required>
			</div>
		<div class="form-requirement">Validation message here</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
		<label for="zipCode" class="label">Label: Zip Code</label>
		<div class="text-input-field-wrapper">
			<input name="zipCode" placeholder="01234" id="zipCode" inputmode="numeric" type="text" value="" maxlength="9" required>
		</div>
		<div class="form-requirement">Validation message here</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
		<label for="my_Phone" class="label">Label: Phone Number</label>
		<div class="text-input-field-wrapper">
			<input name="phone" placeholder="(555) 222-3456" id="my_Phone" inputmode="tel" type="tel" value="" maxlength="10" required>
		</div>
		<div class="form-requirement">Validation message here</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
		<label for="my_Email" class="label">Label: E-mail Address</label>
		<div class="text-input-field-wrapper">
			<input name="email" placeholder="user@domain.com" id="my_Email" inputmode="email" type="email" value="" maxlength="255" required>
		</div>
		<div class="form-requirement">Validation message here</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
		<div class="select">
			<label for="my_Degree_Level" class="label">Label: Select</label>
			<div class="select-input-wrapper">
				<select name="Degree_Level_Program__c" id="my_Degree_Level" required>
					<option value="default" class="default">Choose a Degree Level</option>
					<option value="associate">Associate</option>
					<option value="bachelors">Bachelor's</option>
					<option value="masters">Master's</option>
					<option value="doctoral">Doctoral</option>
					<option value="certificate">Certificate</option>
				</select>
				<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="https://www.w3.org/2000/svg" class="select-arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
			</div>
			<div class="form-requirement">Validation message here</div>
		</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item checkbox-wrapper">
	  <input id="checkbox1" class="checkbox" type="checkbox" value="Yes" name="checkbox" checked>
	  <label for="checkbox1" class="checkbox-label">Label: Yes</label>
	</div>
	<div class="form-item checkbox-wrapper">
	  <input id="checkbox2-disabled" class="checkbox" type="checkbox" value="new" name="checkbox" disabled>
	  <label for="checkbox2-disabled" class="checkbox-label">Label: Disabled</label>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
		<div class="radio-button-group">
			<div class="radio-button-wrapper">
				<input name="radio" id="radio1" class="radio-button" type="radio" value="yes" checked>
				<label for="radio1" class="radio-button-label">
	        <span class="radio-button-appearance"></span>
	        <span class="radio-button-label-text">Label: Yes</span>
	      </label>
			</div>
			<div class="radio-button-wrapper">
				<input name="radio" id="radio2" class="radio-button" type="radio" value="no" checked>
				<label for="radio2" class="radio-button-label">
	        <span class="radio-button-appearance"></span>
	        <span class="radio-button-label-text">Label: No</span>
	      </label>
			</div>
			<div class="radio-button-wrapper">
				<input name="radio" id="radio3" class="radio-button" type="radio" value="maybe" checked>
				<label for="radio3" class="radio-button-label">
	        <span class="radio-button-appearance"></span>
	        <span class="radio-button-label-text">Label: Maybe</span>
	      </label>
			</div>
		</div>
	</div>
				
			

HTML Code Snippet

				
	<div class="form-item">
	  <input class="toggle-input" id="toggle1" type="checkbox">
	  <label class="toggle-input-label" for="toggle1">
	    Label: This is a toggle
	    <span class="toggle-switch">
	      <span class="toggle-text--off" aria-hidden="true">Off</span>
	      <span class="toggle-text--on" aria-hidden="true">On</span>
	    </span>
	  </label>
	</div>
				
			

General Guidance

Text Input

Text inputs are the default type of input. They are to be used for short form content fields.

Number Input

This is actually a faux number input. The type is still text and inputmode is set to numeric for mobile-optimized keyboards. Our only current use case is for Zip Code. We apply extra masking (see forms guidance) to optimize user experience.

E-mail Input

E-mail inputs set both type and inputemode to email.

Phone Input

Phone inputs set both type and inputemode to tel.

Select

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

Accessibility for Selects

To maximize accessibility, it is strongly recommended not to style select dropdowns. One of the WCAG 2.0 standards for accessibility is “ensuring keyboard control for all functionality.” CSS alternatives to select elements do not meet this requirement.

Checkbox

Checkboxes are used for a list of options where the user may select multiple options, including all or none. The checkbox control allows for two states: selected and unselected. Always use clear and concise labels for checkboxes. Be explicit about the results that will follow if the checkbox is selected. Labels appear to the right of checkboxes.

Radio Button

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option. A set of radio buttons should default to having one option selected. Never display them without a default selection. Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.

Toggle

Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user "flips" the toggle switch. They are commonly used for "on/off" switches. Use labels with a toggle so the action is clear. Labels should be three words or less and appear on the side of a toggle.

Input Labels

Effective form labeling helps users understand what information to enter into a text input. Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

Accessibility best practices for labels:

• Labels must be visible when an input gets focus.
• Labels must be announced to the screen reader on focus.
• Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.

Input Placeholder Text

Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation.

Input Validation and Errors

Real time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the forms usage page.

JQuery Mask

JQuery Mask is a plugin to mask form fields. An input mask refers to a string expression that constrains user input. Masking creates a template or set format that entered data must conform to, ensuring data integrity. Some frequent uses of input masks include entry of telephone numbers, ZIP or postal codes, times, and dates.

We currently use masking on Postal Code and Telephone Number inputs.

				
	$("#my_Phone").mask("(000) 000-0000");
	$("#my_PostalCode").mask("00000-0000");