Forms are useful to interact with the users and to provide them the information they are looking for, such as in context of search for product or for direct contact. Thus, forms must remain easily understandable and usable, regardless of the device or context of use.
Here is an example of a basic input that includes a label explaining the reason of the input, a placeholder clarifying the expected type of input and an icon (with Font Awesome) illustrating the action.
You can change the place of the addon by simply change its place in the html.
For instance, in the example below, we put the .input-group-addon before the input.
Notice that the type attribute of the input can be changed for number, tel or email
The previous example also highlights that it is possible, and highly recommended, to show when an input is required. To do this, add the class .required to the label.
Checkboxes and radio inputs
Checkboxes and radio inputs both offer a choice to the users. The checkbox system is more flexible since it allows 0, 1 or multiple choices while the radio inputs only expect 1 pick among various options.
The checkboxes are used with one global label explaining the choice the user has to make. Then each choice has its proper label. These labels must have a specific for attribute corresponding to the id of its input. Each id must be specific to its label : 2 inputs cannot have the same id.
If a checkbox should be checked by default, add a checked attribute on its input.
It is also possible to nest different checkboxes and to thus manage dependent options.
The radio inputs are used with the custom inputs of Bootstrap 4. The name attribute of the inputs allows to link the different options of the radio input.
A switch is an input offering two possibilities. It can also be used as a small navigation system between 2 alternatives.
The select offers the users to choose between different possibilities. The input here remains in a simple yet effective form, so it triggers the native behavior of the device in mobile contexts.
Input range (slider)
The slider component allows the user to filter results by specifiying a range of values. It is made of a slider with 2 cursors and, 2 inputs precising the min and max values selected.
The slider component is based on 2 dependencies : the library angular.js and the angular plugin angular-slider which needs to be loaded in second.
You can bind the slider values with inputs values using an Angular controller
Notice that the component includes 2 alerts .help-block, that we hide with angular. It is recommended that you should use it to warn the users when values are not allowed.