Form Elements

Forms and form fields facilitate information collection. Efficient forms mean users spend less time and effort, which leads to increased form completion.

Text Fields

Text fields allow people to enter information. Use text fields if there is a need to capture information that has a wide variability of answers.

In cases where there are questions or text that is too long to be the text field label, display the question or field label above the text fieldn. Then choose a specific noun as a label for the text field.

How much do you want to borrow?
Show CSS
                         
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        .ml-form-field {
        	margin-bottom: 20px;
        	display: block;
        	width: 100%;
        	max-width: 500px;
        	position: relative;
        	border: 0px;
        	padding: 0;
        }
        
        
        
        
        /*  ****** Legend ****** */
        .ml-form-field legend {
        	font-weight: bold;
        	margin-bottom: 5px;
            font-size: 13px;
        	color: #333333;
        }
        
        
        
        /*  ****** Label ****** */
        .ml-form-field label {
        	position: relative;
        	display: block;
        	text-align: left;
            font-size: 13px;
        	color: #333333;
        }
        .ml-form-field label span {
        	display: inline;
        	padding: 5px 2px 2px 2px; 
        }
        
        
        
        
        /*  ****** Form Field  ****** */
        .ml-form-field input {
        	padding: 10px;
        	font: inherit;
        	outline: none;
        	border: 1px solid #757575;
        	font-size: 13px;
        	color: #333333;
        	width: 100%;
        	border-radius: 2px;
        }
        
        .ml-form-field input:focus {
        	border: solid 1px #007abc;
        }
        
        .ml-form-field input:focus + span {
        	color: #666666;
        }
        
        .ml-form-field span {
        	background: #fff;
        	color: #333;
        }
        
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
                         
                    
HideShow HTML
                    
        <form data-forms="floating-label" class="ml-form">
          <fieldset class="ml-form-field">
            <label>
              <input type="text" onkeyup="this.setAttribute('value', this.value);" value="">
                <span>Name</span>
                <div class="ml-form-field-errortext">Error message</div>
              </label>
          </fieldset>
        </form>
                    
                  

With Hint Text

Use hint text for fields that have specific formatting requirements, to help users understand how they need to enter the information.

textfield

On click: Placeholder label will float and hint hext will appear in the field.

textfield

On focus: Hint text disappears as text entered in.

textfield

Filled out: Once filled out hint text disappears and take appearace of filled text.

textfield

Alternative: Alternative format for the hint text.

Validation

Error

Errors appear when the system cannot accept the data the user has entered (e.g. information is missing, the information does not meet the data required)

UX Best Practice: Form validations pertaining to data entered in incorrect data format will appear immediately after user removes focus from the field. Other messages will display when the user submits the form.

HideShow CSS
                      
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        .ml-form-field {
        	margin-bottom: 20px;
        	display: block;
        	width: 100%;
        	max-width: 500px;
        	position: relative;
        	border: 0px;
        	padding: 0;
        }
        
        
        
        
        /*  ****** Legend ****** */
        .ml-form-field legend {
        	font-weight: bold;
        	margin-bottom: 5px;
            font-size: 13px;
        	color: #333333;
        }
        
        
        
        /*  ****** Label ****** */
        .ml-form-field label {
        	position: relative;
        	display: block;
        	text-align: left;
            font-size: 13px;
        	color: #333333;
        }
        .ml-form-field label span {
        	display: inline;
        	padding: 5px 2px 2px 2px; 
        }
        
        
        
        
        /*  ****** Form Field  ****** */
        .ml-form-field input {
        	padding: 10px;
        	font: inherit;
        	outline: none;
        	border: 1px solid #757575;
        	font-size: 13px;
        	color: #333333;
        	width: 100%;
        	border-radius: 2px;
        }
        
        .ml-form-field input:focus {
        	border: solid 1px #007abc;
        }
        
        .ml-form-field input:focus + span {
        	color: #666666;
        }
        
        .ml-form-field span {
        	background: #fff;
        	color: #333;
        }
        
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
                      
                         
                    
HideShow HTML
                      
         <form data-forms="floating-label" class="ml-form">
          <fieldset class="ml-form-field error">
            <label>
              <input type="text" onkeyup="this.setAttribute('value', this.value);" value="" placeholder="XXX-XX-XXXX">
              <span>Social Security</span>
              <div class="ml-form-field-errortext">Social Security is required</div>
            </label>
          </fieldset>
        </form>
                      
                  

Display Data with Question Mark Icon

Use the information icon when displaying a piece of data or text and you want to provide additional information to the user.

UX Best Practice: Helpful text should only be placed behind an Informational Icon when it is not essential for the user to have that information. If it is required information, instead display the text as instructional text on the page.



Birthday Rule

Coordination of benefits:

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


Hide Show CSS
                        
/* normal tooltip trigger */
.ml-tooltip-trigger.fa  {
	padding:0 5px;
	color:#007ABC;
	font-size:16px;
}

.ml-tooltip-trigger.fa:after{
	content:'\f29c';
}

.ml-tooltip-trigger.fa:hover:after{
	content:'\f059';
}

/* alert tooltip trigger */
.alert.fa{
	color:red;
}
.alert.fa:after{
	content:'\f06a';
}
.alert.fa:hover:after{
	content:'\f06a';
}

/* tooltip style */

.ml-ui-tooltip {
    background: #ffffff !important;
	border: 1px solid #007ABC !important ;
}

.ml-ui-tooltip-alert {
    background: #FDE8E8 !important;
	border: 1px solid #DB1818 !important ;
}

/* tooltip arrow style */

.ml-tooltip-arrow, .ml-tooltip-arrow-alert{
	width: 50px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}
.ml-tooltip-arrow.top, .ml-tooltip-arrow-alert.top {
	
	top: -16px;
	bottom: auto;
}
.ml-tooltip-arrow.left, .ml-tooltip-arrow-alert.left {
	
	left: 40%;
}

.ml-tooltip-arrow.right, .ml-tooltip-arrow-alert.right {
	right: auto;
}


.ml-tooltip-arrow:after, .ml-tooltip-arrow-alert:after{
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ml-tooltip-arrow.top:after, .ml-tooltip-arrow-alert:after {
	bottom: -20px;
	top: auto;
}

.ml-tooltip-arrow:after{
	background: #ffffff;
	border: 1px solid #007ABC;
}

.ml-tooltip-arrow-alert:after{
	background: #FDE8E8;
	border: 1px solid #DB1818;
}

  
        
                            
HideShow HTML
                                                

<!-- Tooltip -->
Birthday Rule<span title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet odio eu augue imperdiet ultrices id et magna. Etiam quam nulla, varius id gravida eu, porta non tortor. Vivamus gravida non diam sed faucibus. Phasellus non justo metus. Vestibulum blandit malesuada mi nec convallis." class="ml-tooltip-trigger fa"></span><br><br>

<strong>Coordinationb of benefits:</strong><span title="How a plan pays benefits when a patient is covered by more than one dental benefits plan." class="ml-tooltip-trigger fa"></span><br><br><br>
<p class="mlpl-type-copy-big">Alert message flyout.</p>
<strong>Status: </strong>Denied<span title="Information is needed to process this absence." class="ml-tooltip-trigger alert fa"></span><br><br>

<!-- ======== script ======== -->

<script>

$( function() {
// normal tooptip
$('.ml-tooltip-trigger').tooltip({
tooltipClass: "ml-ui-tooltip",

position: {
my: "center top+10",
at: "bottom",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "ml-tooltip-arrow" )
.addClass( feedback.vertical)
.addClass( feedback.horizontal)
.appendTo( this );
},

collision: "flipfit"
}
});


// Alert tooltip

$('.ml-tooltip-trigger.alert').tooltip({
tooltipClass: "ml-ui-tooltip-alert",

position: {
my: "center top+10",
at: "bottom",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "ml-tooltip-arrow-alert" )
.addClass( feedback.vertical)
.addClass( feedback.horizontal)
.appendTo( this );
},

collision: "flipfit"
}
});
});

</script>

Form Field Tooltips

Option 1: Form Element with "What’s This” Link

Use the “What’s This” link when displaying a form element, such as a text field or a dropdown, and you want to provide additional helpful information to the user.

Option 2: Form Field with Question Mark Icon

Use the question mark icon within the form field and use below tooltip style in places where there are only less number of form fields on screen and only few needs additional tooltips. Ideally it should be small form with in drawer or with in a banner where vertical space saving is critical.

UX Best Practice: Helpful text should only be placed behind a “What’s This” link when it is not essential for the user to have that information to complete the form element. If it is required information, instead display the text as instructional text on the page.

Never use "What's This?" link and question mark icon with in a form field in the same form. Choose only one that is appropriate for that particular scenario.


  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


HideShow CSS
                         
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        .ml-form-field {
        	margin-bottom: 20px;
        	display: block;
        	width: 100%;
        	max-width: 500px;
        	position: relative;
        	border: 0px;
        	padding: 0;
        }
        
        
        
        
        /*  ****** Legend ****** */
        .ml-form-field legend {
        	font-weight: bold;
        	margin-bottom: 5px;
            font-size: 13px;
        	color: #333333;
        }
        
        
        
        /*  ****** Label ****** */
        .ml-form-field label {
        	position: relative;
        	display: block;
        	text-align: left;
            font-size: 13px;
        	color: #333333;
        }
        .ml-form-field label span {
        	display: inline;
        	padding: 5px 2px 2px 2px; 
        }
        
        
        
        
        /*  ****** Form Field  ****** */
        .ml-form-field input {
        	padding: 10px;
        	font: inherit;
        	outline: none;
        	border: 1px solid #757575;
        	font-size: 13px;
        	color: #333333;
        	width: 100%;
        	border-radius: 2px;
        }
        
        .ml-form-field input:focus {
        	border: solid 1px #007abc;
        }
        
        .ml-form-field input:focus + span {
        	color: #666666;
        }
        
        .ml-form-field span {
        	background: #fff;
        	color: #333;
        }
        
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
        
        /* ****** help Text   ****** */
        .ml-form-field-helptext {
        	font-size: 13px;
        	color: #333333;
        	margin-top: 5px;
        }
       .ml-form-field-helptext a {
            color: #007abc;
            font-size: 13px;
            text-decoration:underline;
        }
        
        .ml-form-field-helptext a:hover {
            text-decoration:none;
        }
        .ml-form-field-helptext .tooltip {
        	background-color: #F2F2F2;
        	font-size: 12px;
        	line-height: 16px;
        	color: #333333;
        	padding: 10px;
        	text-decoration: none;
        	display: none;
        	margin-top: 10px;
        }
        .ml-form-field-helptext.open .tooltip {
        	display: block;
        }
                         
                    
HideShow HTML
                        
          <form data-forms="floating-label" class="ml-form">
            <fieldset class="ml-form-field">
              <label>
                <input type="text" onkeyup="this.setAttribute('value', this.value);" value="">
                <span>Phone Number <small>(optional)</small></span>
                <div class="ml-form-field-helptext">
                  <a href="#tooltipid" class="ml-form-field-helptext-link">What's this?</a>
                  <div id="tooltipid" class="tooltip">Lorem tool tip to go here lorem ipsum dolor sit amet dolor sit</div>
                </div>
              </label>
            </fieldset>
          </form>
                        
                    

Drop Down with "What’s This” Link

Similar to the information icon, the link lives underneath dropdowns to provide additional information.

What's this?
Lorem tool tip to go here lorem ipsum dolor sit amet dolor sit


  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


HideShow CSS
                        
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        .ml-form-field {
        	margin-bottom: 20px;
        	display: block;
        	width: 100%;
        	max-width: 500px;
        	position: relative;
        	border: 0px;
        	padding: 0;
        }
        
        
        
        
        /*  ****** Legend ****** */
        .ml-form-field legend {
        	font-weight: bold;
        	margin-bottom: 5px;
            font-size: 13px;
        	color: #333333;
        }
        
        
        
        /*  ****** Label ****** */
        .ml-form-field label {
        	position: relative;
        	display: block;
        	text-align: left;
            font-size: 13px;
        	color: #333333;
        }
        .ml-form-field label span {
        	display: inline;
        	padding: 5px 2px 2px 2px; 
        }
        
        
        /*  ******  Dropdown  ****** */
        .ml-form-field-droplist-trigger {
        	position: relative;
        	border: solid 1px #757575;
        	width: 100%;
        	color: #333333;
        	text-align: left;
        	font-size: 13px;
        	background-color: #fff;
        	padding: 10px;
        }
        .ml-form-field-droplist-trigger:after {
        	content: "";
        	width: 0;
        	height: 0;
        	border: 7px solid transparent;
        	border-color: #AAA9AA transparent transparent transparent;
        	position: absolute;
        	top: 16px;
        	right: 10px;
        }
        .ml-form-field-droplist-trigger:focus {
        	border: solid 1px #007abc;
        	outline: 0;
        }
        .ml-form-field-droplist-trigger:focus:after {
        	border-color: #007abc transparent transparent transparent;
        }
        .ml-form-field-droplist-trigger.active {
        	border: solid 1px #007abc;
        	border-bottom: 0;
        }
        .ml-form-field-droplist-trigger.active:after {
        	border-color: #007abc transparent transparent transparent;
        }
        .ml-form-field-droplist-fields {
        	display: none;
        }
        .ml-form-field-droplist-fields.active {
        	display: block;
        	border: solid 1px #007abc;
        	border-top: 0;
        	padding: 10px;
        }
        .ml-form-field-select .select-hidden {
        	opacity: 0;
        	padding-right: 10px;
        	font-size: 13px;
        }
        .ml-form-field-select .select-hidden:focus {
        	border: solid 1px red;
        }
        .ml-form-field-select .select {
        	cursor: pointer;
        	display: inline-block;
        	position: relative;
        	font-size: 13px;
        	border: 1px solid #757575;
        	color: #333333;
        	width: 100%;
        	height: 40px;
        }
        .ml-form-field-select .select-styled {
        	position: absolute;
        	top: 0;
        	right: 0;
        	bottom: 0;
        	left: 0;
        	line-height: 20px;
        	font-size: 13px;
        	background-color: #fff;
        	padding: 10px;
        }
        .ml-form-field-select .select-styled:after {
        	content: "";
        	width: 0;
        	height: 0;
        	border: 7px solid transparent;
        	border-color: #AAA9AA transparent transparent transparent;
        	position: absolute;
        	top: 16px;
        	right: 10px;
        }
        .ml-form-field-select .select-styled:focus {
        	border: solid 1px #007abc;
        	outline: 0;
        }
        .ml-form-field-select .select-styled:focus:after {
        	border-color: #007abc transparent transparent transparent;
        }
        .ml-form-field-select .select-options {
        	display: none;
        	position: absolute;
        	top: 100%;
        	right: 0;
        	font-size: 13px;
        	left: 0;
        	z-index: 999;
        	margin: 0;
        	padding: 0;
        	border: solid 1px #007abc;
        	border-top: 0px;
        	list-style: none;
        	background-color: #ffffff;
        }
        .ml-form-field-select .select-options li {
        	margin: 0;
        	padding: 12px 0;
        	font-size: 13px;
        	text-indent: 15px;
        	border-top: 1px solid #e6e6e6;
        }
        .ml-form-field-select .select-options li:hover {
        	color: #ffffff;
        	background: #007abc;
        }
        .ml-form-field-select .select-options li[rel="hide"] {
        	display: none;
        }
        .ml-form-field-select .select-options li:first-child {
        	border-top: 0;
        }
        
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
        
        /* ****** help Text   ****** */
        .ml-form-field-helptext {
        	font-size: 13px;
        	color: #333333;
        	margin-top: 5px;
        }
        .ml-form-field-helptext a {
            color: #007abc;
            font-size: 13px;
            text-decoration:underline;
        }
        
        .ml-form-field-helptext a:hover {
            text-decoration:none;
        }
        .ml-form-field-helptext .tooltip {
        	background-color: #F2F2F2;
        	font-size: 12px;
        	line-height: 16px;
        	color: #333333;
        	padding: 10px;
        	text-decoration: none;
        	display: none;
        	margin-top: 10px;
        }
        .ml-form-field-helptext.open .tooltip {
        	display: block;
        }
                        
                         
                    
HideShow HTML
                        
        <form data-forms="floating-label" class="ml-form">
          <fieldset class="ml-form-field ml-form-field-select">
            <label>
              <select name="Options">
                <option disabled selected>Select an Option</option>
                <option value="Option A">Option A</option>
                <option value="Option B">Option B</option>
                <option value="Option C">Option C</option>
              </select>
            </label>
            <div class="ml-form-field-helptext">
              <a href="#tooltipid" class="ml-form-field-helptext-link">What's this?</a>
              <div id="tooltipid" class="tooltip">Lorem tool tip to go here lorem ipsum dolor sit amet dolor sit</div>
            </div>
          </fieldset>
        </form>
                        
                    

Text Field with Show/Hide Icon

The show/hide icon provides an extra layer of visual security when entering sensitive information, such as a social security number or password.


  • Download Associated Images:Zip
  • Download Associated Javascripts:Zip


HideShow CSS
                        
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        .ml-form-field {
        	margin-bottom: 20px;
        	display: block;
        	width: 100%;
        	max-width: 500px;
        	position: relative;
        	border: 0px;
        	padding: 0;
        }
        
        
        
        
        /*  ****** Legend ****** */
        .ml-form-field legend {
        	font-weight: bold;
        	margin-bottom: 5px;
            font-size: 13px;
        	color: #333333;
        }
        
        
        
        /*  ****** Label ****** */
        .ml-form-field label {
        	position: relative;
        	display: block;
        	text-align: left;
            font-size: 13px;
        	color: #333333;
        }
        .ml-form-field label span {
        	display: inline;
        	padding: 5px 2px 2px 2px; 
        }
        
        
        
        
        /*  ****** Form Field  ****** */
        .ml-form-field input {
        	padding: 10px;
        	font: inherit;
        	outline: none;
        	border: 1px solid #757575;
        	font-size: 13px;
        	color: #333333;
        	width: 100%;
        	border-radius: 2px;
        }
        
        .ml-form-field input:focus {
        	border: solid 1px #007abc;
        }
        
        .ml-form-field input:focus + span {
        	color: #666666;
        }
        
        .ml-form-field span {
        	background: #fff;
        	color: #333;
        }
        
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
        
        
        /*  ****** Toggle Visible  ****** */
        .ml-form-field-togglevisible {
        	width: 18px;
        	height: 13px;
        	background: url(img/ml-toggle-visibility-show.png) no-repeat;
        	background-size: 100%;
        	display: block;
        	position: absolute;
        	right: 15px;
        	top: 12px;
        }
        
        .ml-form-field-togglevisible.hidden {
        	background: url(img/ml-toggle-visibility-hide.png) no-repeat;
        	background-size: 100%;
        }
                        
                    
HideShow HTML
                        
        <form data-forms="floating-label" class="ml-form">
          <fieldset class="ml-form-field">
            <label>
              <input type="text" onkeyup="this.setAttribute('value', this.value);" value="" placeholder="XXX-XX-XXXX" class="ml-mask-social">
              <span>Social Security</span>
              <div class="ml-form-field-errortext">Error text</div>
            </label>
            <a href="#" class="ml-form-field-togglevisible"></a>
          </fieldset>
        </form>
                        
                    
textfield

Show: On Load

textfield

Show: On focus

textfield

Hide: On focus

textfield

Hide: On error

Radio Buttons and Checkboxes

Radio Buttons

Radio buttons allow users to select a single option from a set. Radio buttons should be stacked in most cases. If there are only two options available and the associated label is not too long , it can be displayed side by side for better form field alignment.

UX Best Practice: Typically radio buttons are used when there are two choices. Use a dropdown when there are more than two choices.

Time Frame:
A selection is required
Time Frame:
A selection is required
HideShow CSS
                        
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        /*  ****** Radio buttons  ****** */
        .ml-form-field-radio-group {
        	width: auto;
        	height: 18px;
        	position: relative;
        	margin: 20px auto;
        	transition: all 250ms;
        }
        .ml-form-field-radio-group input {
        	position: absolute;
        	z-index: 5;
        }
        .ml-form-field-radio-group label {
        	-webkit-user-select: none;
        	-moz-user-select: none;
        	-ms-user-select: none;
        	user-select: none;
        	width: 90%;
        	height: 16px;
        	cursor: pointer;
        	position: absolute;
        	padding: 0px 0 0 25px;
        }
        .ml-form-field-radio-group label:before {
        	content: '';
        	width: 19px;
        	height: 19px;
        	position: absolute;
        	top: -3px;
        	left: 2px;
        	border: solid 1px #757575;
        	border-radius: 50%;
        }
        .ml-form-field-radio-group label:after {
        	content: '';
        	width: 7px;
        	height: 7px;
        	position: absolute;
        	top: 3px;
        	left: 8px;
        	background-color: #007abc;
        	border: solid 1px #007abc;
        	border-radius: 50%;
        	opacity: 0;
        }
        .ml-form-field-radio-group input[type=radio] {
        	opacity: 0;
        }
        .ml-form-field-radio-group input[type=radio]:checked + label:after {
        	opacity: 1;
        }
        .ml-form-field-radio-group input[type=radio]:focus + label:before, .ml-form-field-radio-group input[type=radio]:checked + label:before {
        	border: solid 1px #007abc;
        }
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
                        
                         
                    
HideShow HTML
                        
        <form data-forms="floating-label" class="ml-form">
          <fieldset class="ml-form-field ml-form-field-radio">
            <legend>Time Frame:</legend>
            <div class="ml-form-field-radio-group">
              <input id="overnight" type="radio" name="time" value="overnight">
              <label for="overnight">Overnight</label>
            </div>
            <div class="ml-form-field-radio-group">
              <input id="sixtyday" type="radio" name="time" value="sixtyday">
              <label for="sixtyday">60 Days</label>
            </div>
          </fieldset>
        </form>
                        
                    

Checkboxes

Checkboxes allow a user to select more than one option from a set.

Time Frame:
Time Frame:
Selection is required.
HideShow CSS
                         
                         
        /*  ****** Forms ****** */
        .ml-form {
        	padding: 20px;
        	position: relative;
        }
        
        /* ****** Check Boxes  ******  */
        .ml-form-field-checkboxes-group {
        	width: auto;
        	height: 18px;
        	position: relative;
        	margin: 20px auto;
        	border-radius: 2px;
        }
        .ml-form-field-checkboxes-group input {
        	position: absolute;
        }
        .ml-form-field-checkboxes-group label {
        	-webkit-user-select: none;
        	-moz-user-select: none;
        	-ms-user-select: none;
        	user-select: none;
        	width: 90%;
        	height: 16px;
        	cursor: pointer;
        	position: absolute;
        	padding: 0px 0 0 25px;
        }
        .ml-form-field-checkboxes-group label:before {
        	content: '';
        	width: 16px;
        	height: 16px;
        	position: absolute;
        	top: -3px;
        	left: 2px;
        	border: solid 2px #757575;
        }
        .ml-form-field-checkboxes-group label:after {
        	content: '';
        	width: 9px;
        	height: 4px;
        	position: absolute;
        	top: 2px;
        	left: 6px;
        	border-left: 2px solid #007abc;
        	border-bottom: 2px solid #007abc;
        	opacity: 0;
        	-webkit-transform: rotate(-45deg);
        	-ms-transform: rotate(-45deg);
        	transform: rotate(-45deg);
        }
        .ml-form-field-checkboxes-group input[type=checkbox] {
        	opacity: 0;
        }
        .ml-form-field-checkboxes-group input[type=checkbox]:checked + label:after {
        	opacity: 1;
        }
        .ml-form-field-checkboxes-group input[type=checkbox]:focus + label:before, .ml-form-field-checkboxes-group input[type=checkbox]:checked + label:before {
        	border-color: #007abc;
        }
        
        
        /* ******  Error   ****** */
        .ml-form-field-errortext {
        	display: none;
        	font-size: 12px;
        	color: #DB1818;
        	margin-top: 5px;
        }
        
        
        
        /* ****** Form field Error input ******* */
        .ml-form-field.error input, .ml-form-field.error select {
        	border: solid 1px #DB1818;
        	background-color: #FDE8E8;
        }
        .ml-form-field.error input:focus, .ml-form-field.error select:focus {
        	background-color: #fff;
        }
        .ml-form-field.error input:focus + span, .ml-form-field.error select:focus + span {
        	background-color: #fff;
        	color: #DB1818;
        }
        .ml-form-field.error span {
        	background-color: #FDE8E8;
        	color: #DB1818;
        }
        .ml-form-field.error .ml-form-field-errortext {
        	display: block;
        }
        
        
        
        /*  ******  Floating Label   ****** */
        .ml-form[data-forms="floating-label"] input + span, .ml-form[data-forms="floating-label"] input[value=""] + span {
        	transition: 0.3s ease;
        	-webkit-transform: translateY(-0.5em);
        	-ms-transform: translateY(-0.5em);
        	transform: translateY(-0.5em);
        	display: inline-block;
        	position: absolute;
        	top: 0px;
        	left: 10px;
        	overflow: hidden;
        	white-space: nowrap;
        	text-overflow: ellipsis;
        	margin-top: 13px;
        	font-size: 13px;
        	width: 90%;
        }
        .ml-form[data-forms="floating-label"] input:focus + span, .ml-form[data-forms="floating-label"] input:not([value=""]) + span {
        	-webkit-transform: translateY(-100%);
        	-ms-transform: translateY(-100%);
        	transform: translateY(-100%);
        	font-weight: bold;
        	font-size: 13px;
        	visibility: visible;
        	top: -5px;
        	margin-top: 13px;
        	width: auto;
        	background-color: #fff;
        	text-shadow: -4px 2px 0 0 #FFFFFF, 3px 0 1px 0 #FFFFFF, -2px 0 0 0 #FFFFFF, -3px 1px 2px 0 #FFFFFF, 6px 0 0 0 #FFFFFF, 4px 2px 0 0 #FFFFFF, 1px 1px 0 0 #FFFFFF;
        }
                         
                    
HideShow HTML
                        
        <fieldset class="ml-form-field ml-form-field-checkboxes">
          <legend>Time Frame:</legend>
          <div class="ml-form-field-checkboxes-group">
            <input id="lorem2" type="checkbox" name="lorem" value="lorem2">
            <label for="lorem2">Overnight</label>
          </div>
          <div class="ml-form-field-checkboxes-group">
            <input id="lorem1" type="checkbox" name="lorem" value="lorem1">
            <label for="lorem1">Lorem itsum dolor sit amet</label>
          </div>
        </fieldset>
                        
                    

Date Picker

The calendar form field type provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value. If the field has a saved value this is shown in the text box. Otherwise the default value, if any, is displayed.

textfield

Layout

Long and complex forms layout should be singel column. This helps user to complete form quickly as eyes move in a natural direction, from top to bottom, one line at a time. One column is a mobile friendly design convention for mobile where vertical scrolling is a natural motion for mobile users.

  • • Short and logically related fields can be placed in same row (such as for the city and area code).
  • • Multiple form fields not design to collect data (such as filters) can display fields side by side on desktop but has to stack in single column for mobile.
  • • On Desktop when used in conjunction with a primary and secondary buttons, buttons are placed in same row.
  • • On Mobile buttons are collapsing down to a single column, the primary button appears first before the secondary button.
Example: Mobile

For mobile, buttons are stacked under the form fields or text.

button allignment


Example: Desktop/Tablet

For desktop, buttons are aligned in most instances to the left under the form fields or text.

button allignment