Form

Basic form
Switch

The order of switch__indicator and switch__link can be swapped to show it inverted.

Checkbox
Radio
Group
http://
http://
Group multiple
http://
@example.com
http://
@example.com
Group with icons
Upload
Dropdown
<div class="dropdown dropdown--top-right"> <select name="language"> <option value="http://br.local.freepik.com/">Brazileiro</option> <option value="http://de.local.freepik.com/">Deutsch</option> <option value="http://local.freepik.com/" selected="">English</option> <option value="http://local.freepik.es/">Español</option> <option value="http://fr.local.freepik.com/">Français</option> <option value="http://jp.local.freepik.com/">日本語</option> <option value="http://pl.local.freepik.com/">Polski</option> <option value="http://ru.local.freepik.com/">Pусский</option> <option value="http://nl.local.freepik.com/">Nederlands</option> <option value="http://it.local.freepik.com/">Italiano</option> </select> </div>
Range

 
                            
new InputRange({
    selector: '#range-fixed',
})

You can initialize the component dynamically

 
                            
new InputRange({
    selector: '#range-dynamic',
    withSteps: true,
    marks: [
        { value: 1, text: '1 people' },
        { value: 2, text: '2 people' },
        { value: 3, text: '3 people' },
    ]
})