Allows users to input and select data.
Main input fields across the platform
Default Select Boxes
It’s important to note that default select boxes must be surrounded by
.a-select-container div to appear correctly.
Expanders are useful for hiding optional subforms or additional content. A comment control is an example of an expander.
Using the following component API call, the toggle should work automatically. For good accessibility, The label consists of the entire full-width area and the label text as well as the icons are clickable and should respond to keyboard events.
In some cases changing the state of the checkbox should submit the surrounding form (implemented using
$(this).trigger('submit.rails') ). To enable immediate submit on change, add the class
.js-immediate-submit to the
To manipulate the value of checkboxes on the
change event and toggle between 1 and 0 (which is the default for a single Rails checkbox), add the class
.m-toggle-checkbox-group to contain multiple checkboxes, to display borders between each checkbox, but not on the last one.
error class to the form field & label in error to produce the FL Yellow outline. Use the
novalidate attribute on the form element if the form has client-side validation, so our own styles takes precedence over browser defaults.
How to use write error messages
Error messages should be specific, helpful and provide clear instruction on how to fix the error.
Combo inputs combine a form field and a submit button for a single line, single field form row.