Form Elements

Purpose

Allows users to input and select data.

Example

Input Fields

Description

Input

Main input fields across the platform

Link

Variants

Default Select Boxes

We have two types of select boxes, the plain, non-javascript version which renders a fully styled outer box but comes with the default, native dropdown menu. An example of the default select can be seen here link.

It’s important to note that default select boxes must be surrounded by  .a-select-container div to appear correctly.

Select Boxes

Javascript Select Boxes

We also have a Javascript version of the select which offers us more control when it comes to styles and customisations, in addition to giving us the ability to extend behaviour and logic. Previously we used Chosen and Select2 libraries for creating Javascript selects, however these are now deprecated and we now use React Select. A customised, multi-select example can be found here.

React Select Example

Expanders

Expanders are useful for hiding optional subforms or additional content. A comment control is an example of an expander.

Link

Expanders

Toggle switches

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 .a-toggle-checkbox element.

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 .js-manipulate-value.

Grouping checkboxes

Use a .m-toggle-checkbox-group to contain multiple checkboxes, to display borders between each checkbox, but not on the last one.

Toggle Switches

Validation feedback

Add the 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.

Link (fail input)


Validation Feedback

Validation feedback

Centered

Validation Feedback Centered

Combo Inputs

Combo inputs combine a form field and a submit button for a single line, single field form row.

Link (main searchbar)

Combo Inputs

Added by: