Forms

Form Elements Developer Notes

Information

Each of the elements listed below have multiple states that can be achieved by adding certain classes or attributes. Most of these elements will support the following states: Default (the standard view), Disabled, Success & Error.

The exception to this are the checboxes and radio buttons. Which presently only supports, unchecked, checked, focused and disabled states; as there aren't many use-case scenarios that would require these elements to have 'Success' and 'Error' states.

Another thing to note is that within the styleguide the developers should be using labels implicitly. This is to ensure that there is good SEO ratings as well as for WCAG2.0 accessibility guidelines.

Input Fields - Variations & States

Information

This section includes Text, Number, Password and Calendars field variations. The main difference between these variations are the [type] attributes of the <input /> fields.

NOTE: As of this current styleguide edition (v1.0-alpha) all of the input fields are using the default browser-level interpretations. This means that there is no standardization across browsers and will mostly be rendered differently depending on browser type and versions.

Visual Example - Variations Types

Below are the examples of the different types of input fields that are widely available across all browsers.

Default State

This is the default state for all of the input fields that are available.

Text Field
Number Field
Password Field
Calendar Field
Disabled State

This is the disabled state for the input fields that are available.

NOTE: The disabled state can be triggered by either using the disabled attribute that is common to the input tag, or alternatively it can called using .disabled class.

Text Field
Number Field
Password Field
Calendar Field
Success State
Text Field
Number Field
Password Field
Calendar Field
Error State
Text Field
Number Field
Password Field
Calendar Field

Code Usage - Default State

Text Field
Number Field
Password Field
Calendar Field

Code Usage - Disabled State

Text Field
Number Field
Password Field
Calendar Field

Code Usage - Success State

Text Field
Number Field
Password Field
Calendar Field

Code Usage - Error State

Text Field
Number Field
Password Field
Calendar Field

Textarea

Information

This section pertains to the textarea field and [type] attributes of the <textarea></textarea> fields.

NOTE: Since textareas behave in the same way that inputs do, this section will only display a visual example as well as code usage for displaying the default states.

Visual Example

Code Usage

Multi-Selects

Information

This section pertains to the multi-select field and [type] attributes of the <select></select> fields.

NOTE: Since textareas behave in the same way that inputs do, this section will only display a visual example as well as code usage for displaying the default states.

Visual Example

Code Usage

Dropdowns

Information

This section pertains to the textarea field and [type] attributes of the <textarea></textarea> fields.

NOTE: Since textareas behave in the same way that inputs do, this section will only display a visual example as well as code usage for displaying the default states.

Visual Example

Code Usage

Input Groups - Variations & Types

Information

This section pertains to the input groups field and [type] attributes of these fields.

NOTE: For the error state, an .error div is required and directly succeeds the __mst_input_group wrapper.

Visual Example - Variations & Types

Below are the two primary examples with their individual states. This includes input groups with symbols to the left and right.

Left Symbol
Default State
$
Disabled State
$
Success State
$
Error State
$
Please input a valid number.
Right Symbol
Default State
%
Disabled State
%
Success State
%
Error State
%
Please input a valid number.

Code Usage - Left Symbol

Default State
										

											$
Disabled State
										

											$
Success State
										

											$
Error State
										
									
											$
											
										

										
Please input a valid number.

Code Usage - Right Symbol

Default State
										
									
											
											%
Disabled State
										
									
											
											%
Success State
										
									
											
											%
Error State
										
									
											
											%
										

										
Please input a valid number.

Radio Buttons

Information

This section pertains to the custom radio buttons that are themed.

NOTE: For the inline radio button, a .inline class must be added to the radio button wrapper of .__mst_radio.

Visual Example - Variations & Types

Inline Radio
Red
Blue
Green
Yellow
Radio List
Red
Blue
Green
Yellow
Disabled Radio
Un-checked
Checked

Code Usage

Inline Radio
										

											

												
												
											

											

												Red
											

										



										

											

												
												
											

											

												Blue
											

										



										

											

												
												
											

											

												Green
											

										



										

											

												
												
											

											

												Yellow
Radio List
										

											$
Disabled State
										

											

												
												
											

											

												Red
											

										



										

											

												
												
											

											

												Blue
											

										



										

											

												
												
											

											

												Green
											

										



										

											

												
												
											

											

												Yellow

Checkbox Buttons

Information

This section pertains to the custom checkbox buttons that are themed.

NOTE: For the inline checkbox button, a .inline class must be added to the checkbox button wrapper of .__mst_radio.

Visual Example - Variations & Types

Inline Checkbox
Red
Blue
Green
Yellow
Checkbox List
Red
Blue
Green
Yellow
Disabled Checkbox
Un-checked
Checked

Code Usage

Inline Checkbox
										

											

												
												
											

											

												Red
											

										



										

											

												
												
											

											

												Blue
											

										



										

											

												
												
											

											

												Green
											

										



										

											

												
												
											

											

												Yellow
Checkbox List
										

											

												
												
											

											

												Red
											

										



										

											

												
												
											

											

												Blue
											

										



										

											

												
												
											

											

												Green
											

										



										

											

												
												
											

											

												Yellow
Disabled Checkbox
										

											

												
												
											

											

												Un-checked
											

										



										

											

												
												
											

											

												Checked