Forms

Class Reference

Class Info
form--horizontal Denotes a form with labels displaying beside controls. Should be added to a form.
form--inline Denotes a form with controls displaying on same line. Should be added to a form.
form--inline--buttons Denotes an "inline" form with one or more buttons.
form--inline--no-button Denotes an "inline" form with no buttons.
form--inline-labels Denotes a form with labels displaying inside controls. Should be added to a form.
form-title Denotes a form title element. Should be added to a h5.
form-row Denotes a form row element. Should be added to a div.
form-actions Denotes a form footer element containing a submit button. Should be added to a div.
form-row--field-collection Denotes a form row element that contains a field collection.
form-row--required Denotes a form row element that contains a required field.
form-row--has-errors Denotes a form row element that contains an error message.
form-row--sub-options Denotes a form row element that contains a field with sub-options.
form-row--text Denotes a form row element that contains a "text" input.
form-row--password Denotes a form row element that contains a "password" input.
form-row--radio Denotes a form row element that contains a "radio" input list.
form-row--checkbox Denotes a form row element that contains a "checkbox" input list.
form-row--switch Denotes a form row element that contains a "switch" field.
form-row--search Denotes a form row element that contains a "search" input.
form-row--file Denotes a form row element that contains a "file" input.
form-row--email Denotes a form row element that contains an "email" input.
form-row--number Denotes a form row element that contains a "number" input.
form-row--date Denotes a form row element that contains a "date" input.
form-row--date-picker Denotes a date field with a datepicker.
form-row--date-fields Denotes a date field with dropdown fields.
form-row--date-range-picker Denotes a date range field with a datepicker.
form-row--date-range-fields Denotes a date range field with dropdown fields.
form-row--time Denotes a form row element that contains a "time" input.
form-row--time-picker Denotes a time field with a timepicker.
form-row--time-fields Denotes a time field with dropdown fields.
form-row--time-range-picker Denotes a time range field with a timepicker.
form-row--time-range-fields Denotes a time range field with dropdown fields.
form-row--datetime Denotes a form row element that contains a "datetime" input.
form-row--datetime-picker Denotes a datetime field with date and time pickers.
form-row--datetime-fields Denotes a datetime field with dropdown fields.
form-row--datetime-range-picker Denotes a datetime range field with date and time pickers.
form-row--datetime-range-fields Denotes a datetime field with dropdown fields.
form-row--select Denotes a form row element that contains a select.
form-row--tel Denotes a form row element that contains a "tel" input.
form-row--textarea Denotes a form row element that contains a textarea.
form-row--url Denotes a form row element that contains a "url" input.
form-row__label Denotes a form label element. Should be added to a div.
form-row__controls Denotes a form controls element. Should be added to a div.
field-collection--address Denotes a collection of address-related fields.
field-collection--name Denotes a collection of name-related fields.
field-collection--payment Denotes a collection of payment-related fields.
has-sub-options Denotes a form control that has sub-options. Should be added to a ol or select.
control-sub-option Denotes the container for a particular control's sub-options. Should be added to a div.
control-sub-option--show Forces a "control-sub-option" element to show its contents.
control-sub-options Denotes the container for a group of "control-sub-option" elements. Should be added to a div.
form-response Denotes the container for the form response message. Should be added to a div.
form-response__text Denotes the container for the form response message text. Should be added to a div.
form-response__fields Denotes the container for the form response message fields list. Should be added to a div.
form-alert Denotes the container for an alert for the form (e.g., required fields are missing). Should be added to a div.