Forms

form {
  @extend  %ftds-form;
}

form {
  @extend  %ftds-form;
}

Checkboxes

Surround a related set of checkboxes with a <fieldset>. The <legend> provides context for the grouping. Do not use fieldset and legend for a single check. Each input should have a semantic id attribute, and its corresponding label should have the same value in its for attribute. List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which checkbox.

form {
  @extend  %ftds-form;
}

form {
  @extend  %ftds-form;
}

Radios

Group related radio buttons together with <fieldset> and describe the group with <legend>. Each radio button should have a label. Associate the two by matching the label’s for attribute to the input’s id attribute.

form {
  @extend  %ftds-form;
}

form {
  @extend  %ftds-form;
}

Selects

Make sure your dropdown has a <label>. If the list of options is very long, use a search select. We use Select2 to further control select inputs.

form {
  @extend  %ftds-form;
}

form {
  @extend  %ftds-form;
}

Date Picker

Date picker uses Bootstrap 3 Datepicker. Check their documentation for more details and options.

form {
  @extend  %ftds-form;
}

Required/Optional Labels

Only one designation type — required or optional — should be used on a given form.

Designate the type that makes up the minority of fields. For example, if eight out of ten fields are required, label the remaining two optional. It is good practice to minimize the number of optional fields in any form.

Disabled

Add attribute disabled to text inputs.

Validation