Forms

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.

You can find the below components in _input.scss.




Basic input

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.

<div class="form-group">
    <label for="">Label of the input</label>
    <div class="form-group">
        <div class="input-group">
            <input type="text" placeholder="placeholder showing example" class="form-control">
            <span class="input-group-addon"><i class="fa fa-search"></i></span>
        </div>
    </div>
</div>
	

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.

+
<div class="form-group">
    <div class="form-group">
        <div class="input-group">
        	<span class="input-group-addon">+</span>
            <input type="text" placeholder="placeholder showing example" class="form-control">
        </div>
    </div>
</div>
	

Notice that the type attribute of the input can be changed for number, tel or email


+
<div class="form-group">
    <label class="required">Email</label>
    <input type="email" name="email" id="" class="form-control" required="" placeholder="Your email address">
</div>

<div class="form-group">
    <label class="required">Phone</label>
    <div class="input-group">
        <span class="input-group-addon">+</span>
        <input type="tel" name="phone" id="" class="form-control" required="" placeholder="Your phone number">
    </div>
</div>

	

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.

<div class="form-group">
    <label class="required">Name</label>
    <input type="text" name="" id="" class="form-control" required="" placeholder="Your name">
</div>
	



Textarea

<div class="form-group">
    <label for="" class="required">Message</label>
    <textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="Your message, in full. Please be as detailed as possible so we can best answer your query."></textarea>
</div>



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.

<div class="form-group">
    <label>Global label</label>
    <div class="checkbox">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">Checkbox 1</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="checkbox2" checked>
        <label for="checkbox2">Checkbox 2</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="checkbox3">
        <label for="checkbox3">Checkbox 3</label>
    </div>
</div>

It is also possible to nest different checkboxes and to thus manage dependent options.

<div class="form-group">
    <label>Masted forklift trucks</label>

    <div class="checkbox">
        <input type="checkbox" id="checkbox4">
        <label for="checkbox4">Industrial</label>
        <div class="checkbox">
            <input type="checkbox" id="checkbox41">
            <label for="checkbox41">Diesel</label>
        </div>
        <div class="checkbox">
            <input type="checkbox" id="checkbox42">
            <label for="checkbox42">Gas</label>
        </div>
        <div class="checkbox">
            <input type="checkbox" id="checkbox43">
            <label for="checkbox43">Electric</label>
        </div>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="checbox5">
        <label for="checbox5">Rough Terrain</label>
    </div>
</div>

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.

<div class="c-inputs-stacked">
	<label class="c-input c-radio">
		<input id="radioStacked1" name="radio-stacked" type="radio" checked>
		<span class="c-indicator"></span>
		Toggle this custom radio
	</label>
	<label class="c-input c-radio">
		<input id="radioStacked2" name="radio-stacked" type="radio">
		<span class="c-indicator"></span>
		Or toggle this other custom radio
	</label>
</div>



Switch

A switch is an input offering two possibilities. It can also be used as a small navigation system between 2 alternatives.

<div class="form-group">
    <div class="btn-group btn-group-justified">
        <label class="btn btn-switch active" name="Machines">Equipment</label>
        <label class="btn btn-switch" name="Attachments">Attachments</label>
    </div>
</div>



Select

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.

<div class="form-group">
    <label for=""></label>
    <select class="form-control">
    	<option value="0" label="Telehandlers">Telehandlers</option>
    	<option value="1" selected="selected" label="Rotating Telehandlers">Rotating Telehandlers</option>
    	<option value="2" label="Masted Forklift Trucks">Masted Forklift Trucks</option>
    	<option value="3" label="Truck Mounted Forklifts">Truck Mounted Forklifts</option>
    	<option value="4" label="Warehousing Equipment">Warehousing Equipment</option>
    	<option value="5" label="Aerial Work Platforms">Aerial Work Platforms</option>
    </select>
</div>



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.

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.

m

Figure too small

m

Figure too large

<div class="form-group">
    <label>Lifting height</label>

    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <input id="" name="minliftingHeight" type="number" class="form-control" min="13" max="32" value="">
                <span class="input-group-addon">m</span>
            </div>
            <p class="help-block ng-hide">Figure too small</p>
        </div>
        <div class="col-xs-6">
            <div class="input-group">
                <input id="" name="maxliftingHeight" type="number" class="form-control" min="13" max="32" value="">
                <span class="input-group-addon">m</span>
            </div>
        </div>
        <p class="help-block ng-hide">Figure too large</p>
    </div>

    <slider floor="13" ceiling="32" step="1" ng-model-low="range.min" ng-model-high="range.max"></slider>
</div>