Forms

components/ui/_forms.scss

Requires jQuery
Requires my-forms.js
Requires my-validator.js

Here are the form tags according to their settings in file _forms.scss. Forms patterns are separated into two groups: Input texts and Checkboxes and radios

Input texts

Input texts contain:

All input types excepting type="checkbox, radio and submit"
<select>
<textarea>

With label

Label + value

A long label description that changes

Other input types

Type date

Type email

Type number

Type password

Type file

Validation

Input texts have Javascript validation enabled by default. It is executed each time input is blurred. When the input is blurred, validator detects is value was changed or not, if it is valid, and apply a class name accordingly (set up in my-validator.js).

It is possible to disable validation by adding class .mod-no-validation

Email with validation

Email without validation

Select

Select form looks like input text type.

Type

Textarea

Label

Colors

Input texts have color set through modifier .mod-[colorName]

mod-success

Type de véhicule

mod-success

mod-warning

Type de véhicule

mod-warning

mod-danger

Type de véhicule

mod-danger

Sizes

Input texts have sizes set through modifier .mod-[sizeName]

Default size

xs size

Type de véhicule

Default size

mod-xs

Built-in buttons

You may include one or two action buttons <a> or <button> around the input text.

CTA

Label

Checkboxes and radios

Checkboxes and radios contain

type="checkbox"
type="radio"

Invert

A simple modifier to invert label and checkbox/radio position .mod-invert

Inverted position checkbox option 1

Inverted position checkbox option 2

Inverted position checkbox option 3

Inverted position radio option 1

Inverted position radio option 2

Inverted position radio option 3

C/R Sizes

Checkboxes and radios have their own sizes modifier .mod-[sizeName]

Groups

Range

Requires nouislider.css
Requires nouislider.min.js noUiSlider documentation
Requires my-range-sliders.js

One handle

Two handles

Options

This component can use all options of noUiSlider. Default options are set as the following into the file my-range-sliders.js. Feel free to tweak it to your needs.

var options = {
    start: [100],
    connect: 'lower',
    range: {
        min: 0,
        max: 100
    },
    tooltips: false,
    pips: {
        mode: 'steps',
        stepped: true,
        density: 10
    }
};

Override noUiSlider default options passing your own options as a string into the custom attribute mod-options.

Most basic

Methods

Each range slider instance is stored as object into myRangeSliders.instances javascript object and named with their specified id. This allows to use noUiSlider methods and events.

Range slider 1

Range slider 2

// Above example gives the following noUiSlider objects ready to use
myRangeSliders.instances.rangeSlider1
myRangeSliders.instances.rangeSlider2

// Read range slider1 value
myRangeSliders.instances.rangeSlider1.get();
// Returns Array [value1, ...] or single number

// Sets range slider1 value to 50
myRangeSliders.instances.rangeSlider1.set(50);

// Reset range slider 1
myRangeSliders.instances.rangeSlider1.reset();

// Reset range slider 2
myRangeSliders.instances.rangeSlider2.reset();

// Change options on the fly
var myNewOptions = {
    start: 30,
    range: {
        min: -20,
        max: 130
    }
}
myRangeSliders.instances.rangeSlider2.updateOptions(myNewOptions);

Range slider 3

Disabled

Several solutions to disable a form element:

On container .my-form: Add modifier class .mod-disabled or .disabled
Directly on the form element: Add modifier class .mod-disabled or .disabled or via attribute disabled=""

Type text disabled

Javascript

Forms come with small javascript file my-forms.js that automatically sets proper states on forms labels:

formGroups.update();