Basic Usage

Required. Form elements should be wrapped in a <form><div class="ae-form-field"></div></form> to ensure that proper semantics are followed. This also ensures proper styling is applied. See http://w3c.github.io/html/semantics.html#forms.

Input Fields

Input Type	Demo	Usage
`text`		Alphanumeric
`number`		Numeric
`email`		user@email.com
`url`		http://
`search`		Alphanumeric
`date`		MM/DD/YYY
`time`		HH:MM AM/PM
`month`		Month YYYY
`color`		Color picker
`range`		Range
`<textarea></textarea>`		Specify value for `rows` and `cols` attributes.

Input Sizes

Size	Demo	Usage
Small		`.ae-input-sm`
Medium		`.ae-input-md`
Large		`.ae-input-lg`

Radio and Checkbox

Add checked attribute to set default selected. Using label will activate the radio upon clicking the text beside it. See Forms in Molecules.

Express UI uses Font Awesome icons and CSS to style checkboxes and radio buttons.

<%= render "express_ui/molecules/forms_radio" %>
<%= render "express_ui/molecules/forms_checkbox" %>

Select

Add input-size in select to change select form height and font size.

<%= render "express_ui/molecules/forms_select" %>

Switch

Source:https://proto.io/freebies/onoff/