Forms
form {
@extend %ftds-form;
}
Text Input
Avoid using placeholder text as a field label for accessbility reasons. Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
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