Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.8)

Note

This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.

Enhanced form controls

Enhanced form controls, like clear and show password buttons can be generated dynamically for supported input types.

Demo

Type something into the input below and an '×' or clear button will appear on the right-hand side. Clicking this button will clear the input.


Type something into the input below and an eye icon or show password button will appear on the right-hand side. Clicking this button will toggle displaying the password in plain text or as asterisks.

How to use

1. Load the JavaScript files to your page and call one of the initialization lines:


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script><!-- Optional: This file handles form validation. -->
<script src="js/coc.forms.js"></script>
<script>
	$( document ).ready( function() {
		// Use the following line to initialize the validation AND to generate the enhanced form controls.
		COC.Form.init();

		// OR use the following line to initialize ONLY the enhanced form controls.
		COC.Form.initFormControls();
	});
</script>

2. Add this data attribute to any forms you wish to generate the enhanced form controls for: data-pl-frm-ctrl="true".


<!-- Example form with the data-attributes to trigger the validation AND the enhanced form controls. -->
<form data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	...
</form>

<!-- Example form with the data-attribute to trigger the enhanced form controls ONLY. -->
<form data-pl-frm-ctrl="true">
	...
</form>

Supported input types

The following input types are supported:

Input type Type of form control button generated
type="text" Clear input
type="email" Clear input
type="search" Clear input
type="url" Clear input
type="password" Show password