| Vapor CSS

Text input

This is the standard single-line input-field. The animation is done in pure css by leveraging "required" and "valid" states.

Style sheet: /scss/controls/input-field.scss

Error message goes here!

Simple description typography

Lorem ipsum dolor sit amet, interdum est eu. A tellus condimentum hendrerit enim, ligula fusce vitae, leo et fusce mauris lorem suscipit scelerisque. Vel arcu, non vestibulum suspendisse non lectus magnis suspendisse, aliquam magna commodo. Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in, ut dolor cras rhoncus.

<div class="coveo-form">
    <div class="input-field form-group">
        <input type="text" value="My valid value" required placeholder="Placeholder text"/>
        <label>Enabled valid input</label>
    </div>

    <div class="input-field form-group">
        <input type="text" required placeholder="Placeholder text"/>
        <label>
            Enabled invalid input
            <span class="inline-help-tooltip" title="A simple inline help text." data-placement="right">
                <span class="inline-help-icon">
                    <svg viewbox="0 0 18 18"><path d="M9 0c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16.2c3.969 0 7.2-3.231 7.2-7.2S12.969 1.8 9 1.8 1.8 5.031 1.8 9s3.231 7.2 7.2 7.2zM8 6V4h2v2zm0 1h2v7H8z"/></svg>
                </span>
            </span>
        </label>
    </div>

    <div class="input-field form-group">
        <input type="text" value="My valid value" required disabled/>
        <label>Disabled valid input</label>
    </div>

    <div class="input-field form-group">
        <input type="text" required disabled/>
        <label>Disabled invalid input</label>
    </div>

    <div class="input-field form-group validate">
        <input class="valid" type="text" value="test@test.test" required/>
        <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?">Valid input</label>
    </div>

    <div class="input-field form-group validate">
        <input class="invalid" type="text" value="not valid" required/>
        <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?">Invalid input</label>
    </div>

    <div class="input-field form-group validate">
        <input class="js-validated-input" type="email" required/>
        <label data-valid-message="You dit it right!" data-invalid-message="Value must be a valid email address.">Validated email</label>
    </div>

    <div id="textarea1" class="input-field form-group js-autosized">
        <textarea required></textarea>
        <label for="textarea1">
            Textarea empty
        </label>
    </div>

    <div id="textarea2" class="input-field form-group mod-resizeable">
        <textarea placeholder="Placeholder text" required></textarea>
        <label for="textarea2">
            Resizable textarea
        </label>
    </div>

    <div id="textarea3" class="input-field form-group js-autosized">
        <textarea required>Lorem ipsum dolor sit amet, interdum est eu. A tellus condimentum hendrerit enim, ligula fusce vitae, leo et fusce mauris lorem suscipit scelerisque. Vel arcu, non vestibulum suspendisse non lectus magnis suspendisse, aliquam magna commodo. Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in, ut dolor cras rhoncus.</textarea>
        <label for="textarea3">
            Autosized textarea using the autosize library
        </label>
    </div>

    <div id="textarea4" class="input-field form-group validate mod-resizeable">
        <textarea class="invalid" placeholder="Placeholder text" required>Lorem ipsum dolor sit amet, interdum est eu.</textarea>
        <label for="textarea4">
            Invalid textarea
        </label>
        <span class="generic-form-error">Error message goes here!</span>
    </div>

    <div class="input-field form-group">
        <h4 class="text-medium-blue">Simple description typography</h4>
        <p class="description">Lorem ipsum dolor sit amet, interdum est eu. A tellus condimentum hendrerit enim, ligula fusce vitae, leo
            et fusce mauris lorem suscipit scelerisque. Vel arcu, non vestibulum suspendisse non lectus magnis suspendisse, aliquam magna
            commodo. Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in, ut dolor cras rhoncus.</p>
    </div>
</div>

<script>
    $('.js-validated-input').change(function(event) {
        var $input = $(event.currentTarget);
        if ($input.is(':valid')) {
            $input.removeClass('invalid');
            $input.addClass('valid');
        } else {
            $input.removeClass('valid');
            $input.addClass('invalid');
        }
    });

    autosize($('.js-autosized textarea'));
</script>

Numeric spinner

Spinner for numeric values. Replacement for HTML5

Style sheet: /scss/controls/numeric-spinner.scss

<div class="input-group admin-numeric-spinner">
    <input type="text" value="1" class="">
     <span class="add-on">
         <div id="SpinnerUp">
             <i class="coveo-sprites-misc-spinner_arrow_up"></i>
         </div>
         <div id="SpinnerDown">
             <i class="coveo-sprites-misc-spinner_arrow_down"></i>
         </div>
     </span>
</div>

<div class="input-group mt4">
    <label class="form-control-label">With an error</label>
    <div class="input-field validate">
        <div class="input-wrapper input invalid" id="SizeInGibibytesWrapper">
            <span id="SizeInGibibytes" class="admin-numeric-spinner-container">
                <div class="input-group admin-numeric-spinner">
                    <input type="text" value="30">
                    <span class="add-on">
                        <div id="SpinnerUp">
                            <i class="coveo-sprites-misc-spinner_arrow_up"></i>
                        </div>
                        <div id="SpinnerDown">
                            <i class="coveo-sprites-misc-spinner_arrow_down"></i>
                        </div>
                    </span>
                </div>
            </span>
        </div>
        <label data-invalid-message="An error"></label>
    </div>
</div>

Checkboxes / Infos

Usage

Checkboxes allow multiple selection inside a set of one or more options. They can also be used as an on or off toggles with only one checkbox.

Guidelines

  • Use a wording that indicates how much item the user can select. Some user may not know the difference between checkboxes and radio buttons.
  • List options vertically; horizontal listings can make it difficult to tell which label is related to which checkbox.
  • Try to limit the size of the label to one line.
  • Always put the most common options at the top of the list.
  • Only preselect options if there’s a strong, user-centred reason to. If you do it, select the value that has the most chance to be chosen by the users.
  • Only reveal additional questions with the expanded zone, pointing to the value that is selected.
  • Partially selected state is used only to indicate that some sub-options are selected and some are not.
  • Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”

Accessibility

  • A set (multiple checkboxes) should have a title.
  • Surround a related set with a <fieldset>. Do not use <fieldset> for a single checkbox.
  • Both the checkbox and its label can be clicked to select the option.
  • The control needs a larger hit areas on a touch devices.

Checkboxes

Custom checkboxes. Compatible IE9+.

Style sheet: /scss/controls/checkboxes.scss


Checked





The checkbox can also be used without the coveo-checkbox-label label.

<label class="coveo-checkbox-label">
    <input type="checkbox" class="coveo-checkbox">
    <button type="button"></button>
    <span class="label">Default</span>
</label>
<br>
<div class="coveo-checkbox-label mt1"> <!-- "label" tag is optional, it can be a div or a span. -->
    <input type="checkbox" class="coveo-checkbox" checked>
    <button type="button"></button>
    <span class="label">Checked</span>
</div>
<br>
<label class="coveo-checkbox-label mt1 js-prop-indeterminate">
    <input type="checkbox" class="coveo-checkbox">
    <button type="button"></button>
    <span class="label">Indeterminate</span>
</label>
<br>
<label class="coveo-checkbox-label disabled mt1">
    <input type="checkbox" class="coveo-checkbox" disabled>
    <button type="button" disabled></button>
    <span class="label">Default Disabled</span>
</label>
<br>
<label class="coveo-checkbox-label disabled mt1">
    <input type="checkbox" class="coveo-checkbox" checked disabled>
    <button type="button" disabled></button>
    <span class="label">Checked Disabled</span>
</label>
<br>
<label class="coveo-checkbox-label disabled mt1 js-prop-indeterminate">
    <input type="checkbox" class="coveo-checkbox" disabled>
    <button type="button" disabled></button>
    <span class="label">Indeterminate Disabled</span>
</label>
<br>
<label class="coveo-checkbox-label mt1">
    <span class="label">Label before</span>
    <input type="checkbox" class="coveo-checkbox">
    <button type="button"></button>
</label>

<p class="mt1">The checkbox can also be used without the coveo-checkbox-label label.</p>
<input type="checkbox" class="coveo-checkbox">
<button type="button" class="mt1"></button>

<div id="other-validation" class="form-group mt4">
    <label class="form-control-label">Validation on checkbox</label>
    <div class="input-field form-group validate">
        <div class="validate input-field">
            <div class="input input-wrapper invalid">
                <div class="multi-select mod-inline">
                    <div class="multi-select-option">
                        <label class="coveo-checkbox-label mt1">
                            <input type="checkbox" class="coveo-checkbox">
                            <button type="button"></button>
                            <span class="label">One option</span>
                        </label>
                    </div>
                    <div class="multi-select-option">
                        <label class="coveo-checkbox-label mt1">
                            <input type="checkbox" class="coveo-checkbox">
                            <button type="button"></button>
                            <span class="label">Another option</span>
                        </label>
                    </div>
                </div>
            </div>
            <label data-invalid-message="Uh! Oh!"></label>
        </div>
    </div>
    
</div>

<script>
    // Set the indeterminate property on js-prop-indeterminate elements.
    $('.js-prop-indeterminate').each(function(i, element) {
        $(element).find('input').prop('indeterminate', true);
    });

    // Handle clicks on checkboxes buttons
    $('.coveo-checkbox + button').click(function(jQueryEventObject) {
        $(this).prev().click();
        jQueryEventObject.preventDefault();
    });
</script>

Radio buttons

Custom radio button.

Style sheet: /scss/controls/radios.scss

A single radio-option
A radio-select
A radio-select with disabled options
<div class="coveo-form bg-white p2">
    <fieldset class="form-group">
        <span class="form-control-label">A single radio-option</span>
        <div class="form-control radio-option">
            <input name="singleOption" type="radio" id="SingleOption" value="purple"/>
            <label for="SingleOption">Purple</label>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <span class="form-control-label">A radio-select</span>
        <div class="form-control radio-select">
            <div class="radio-option">
                <input name="enabledOptions" type="radio" id="Option1" value="blue"/>
                <label for="Option1">Blue</label>
            </div>
            <div class="radio-option">
                <input name="enabledOptions" type="radio" id="Option2" value="green"/>
                <label for="Option2">Green</label>
            </div>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <span class="form-control-label">A radio-select with disabled options</span>
        <div class="form-control radio-select">
            <div class="radio-option">
                <input name="disabledOptions" type="radio" id="Option3" value="yellow" disabled checked/>
                <label for="Option3">Yellow</label>
            </div>
            <div class="radio-option">
                <input name="disabledOptions" type="radio" id="Option4" value="red" disabled/>
                <label for="Option4">Red</label>
            </div>
        </div>
    </fieldset>
</div>

Slide toggle

Another style for a checkbox with stylish animations.

Style sheet: /scss/controls/slide-toggle.scss


Label after

The slide toggle can also be used without the coveo-slide-toggle-label label.

<label class="coveo-slide-toggle-label">
    <span class="toggle-label">Label before</span>
    <input type="checkbox" class="coveo-slide-toggle">
    <button type="button"></button>
</label>
<br>
<div class="coveo-slide-toggle-label mt1"> <!-- "label" tag is optional, it can be a div or a span. -->
    <input type="checkbox" class="coveo-slide-toggle">
    <button type="button"></button>
    <span class="toggle-label">Label after</span>
</div>

<p class="mt1">The slide toggle can also be used without the coveo-slide-toggle-label label.</p>
<input type="checkbox" class="coveo-slide-toggle">
<button type="button" class="mt1"></button>

<script>
    // Handle clicks on slide-toggle buttons
    $('.coveo-slide-toggle + button').click(function(jQueryEventObject) {
        $(this).prev().click();
        jQueryEventObject.preventDefault();
    });
</script>

Slide toggle modifiers

Add boxed option, for boxes.

Style sheet: /scss/controls/slide-toggle.scss


<label class="coveo-slide-toggle-label boxed">
    <span class="toggle-label">Simple text</span>
    <input type="checkbox" class="coveo-slide-toggle">
    <button type="button"></button>
</label>
<label class="coveo-slide-toggle-label boxed ml1">
    <span class="toggle-label">Simple text</span>
    <input type="checkbox" class="coveo-slide-toggle" checked>
    <button type="button"></button>
</label>
<br>
<label class="coveo-slide-toggle-label boxed mt1">
    <span class="toggle-label">Simple text</span>
    <input type="checkbox" class="coveo-slide-toggle">
    <button type="button"></button>
    <span class="toggle-description">A small description of what this is for...</span>
</label>

Slide toggle double

A slide toggle with two options

Style sheet: /scss/controls/slide-toggle-double.scss


<label class="coveo-slide-toggle-double first" for="choice">Choice 1</label>
<input type="checkbox" class="coveo-slide-toggle-double" name="choice" id="choice"><span></span>
<label class="coveo-slide-toggle-double second" for="choice">Choice 2</label>
<br>

Filter box

Basic filter box.

Style sheet: /scss/controls/filter-box.scss

<div class="coveo-filter-container">
    <input type="text" class="filter-box" placeholder="Filter">
    <span class="hide"></span>
    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
    </svg>
</div>

<div class="coveo-filter-container">
    <input type="text" class="filter-box" placeholder="Filter" value="Filter box with value">
    <span>
        <svg class="clear-icon icon fill-medium-grey" viewBox="0 0 10 10">
            <path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path>
        </svg>
    </span>
    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
    </svg>
</div>

<div class="coveo-filter-container mod-small">
    <input type="text" class="filter-box" placeholder="Filter">
    <span class="hide"></span>
    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
    </svg>
</div>

<div class="coveo-filter-container mod-small">
    <input type="text" class="filter-box" placeholder="Filter" value="Filter box with value">
    <span>
        <svg class="clear-icon icon fill-medium-grey" viewBox="0 0 10 10">
            <path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path>
        </svg>
    </span>
    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
    </svg>
</div>

Input slider

Styled input slider for cross-browser compatibility. IE10+, FF, Chrome, Safari. Initialize the component's colors whenever it is rendered by using $(selector).slider(). See Coveo Slider for more infos

<input type="range" class="coveo-slider-input" min="1" max="100" value="50">

Date Picker

Follow http://foxrunsoftware.github.io/DatePicker/ documentation to initialize a date picker.

Style sheet: /scss/controls/datepicker.scss

<div class="coveo-datepicker inline-block"></div>
<div class="coveo-form">
    <div class="form-group">
        <label class="form-control-label">Dropdown Example</label>
        <div class="form-control">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="dropdown-prepend">Option:</span>
                    <span class="value-icon"><svg viewbox="0 0 46 46"><path d="M45.99 23.54c0-1.627-.149-3.191-.426-4.693h-22.05v8.875h12.599c-.543 2.868-2.192 5.298-4.671 6.925v5.757h7.566c4.427-3.994 6.981-9.876 6.981-16.864" fill="#4285f4"/><path d="M23.516 45.962c6.321 0 11.62-2.054 15.493-5.559l-7.566-5.757c-2.096 1.377-4.778 2.19-7.928 2.19-6.097 0-11.258-4.04-13.1-9.459H2.594v5.944c3.852 7.498 11.769 12.64 20.92 12.64" fill="#34a853"/><path d="M10.417 27.378a13.549 13.549 0 0 1-.734-4.359c0-1.512.266-2.983.734-4.359v-5.944H2.596a22.554 22.554 0 0 0 0 20.608l7.821-5.944" fill="#fbbc05"/><path d="M23.516 9.2c3.437 0 6.523 1.158 8.949 3.431L39.18 6.05C35.126 2.348 29.827.074 23.516.074c-9.151 0-17.07 5.141-20.92 12.64l7.821 5.944c1.841-5.423 7-9.459 13.1-9.459" fill="#ea4335"/></svg></span>
                    <span class="dropdown-selected-value">Option 3</span>
                    <span class="dropdown-toggle-arrow"></span>
                </button>

                <ul class="dropdown-menu">
                    <li><span class="enabled">Option 1</span></li>
                    <li><span class="enabled">Option 2</span></li>
                    <li>
                    <span class="enabled">
                        <span class="value-icon"><svg viewbox="0 0 46 46"><path d="M45.99 23.54c0-1.627-.149-3.191-.426-4.693h-22.05v8.875h12.599c-.543 2.868-2.192 5.298-4.671 6.925v5.757h7.566c4.427-3.994 6.981-9.876 6.981-16.864" fill="#4285f4"/><path d="M23.516 45.962c6.321 0 11.62-2.054 15.493-5.559l-7.566-5.757c-2.096 1.377-4.778 2.19-7.928 2.19-6.097 0-11.258-4.04-13.1-9.459H2.594v5.944c3.852 7.498 11.769 12.64 20.92 12.64" fill="#34a853"/><path d="M10.417 27.378a13.549 13.549 0 0 1-.734-4.359c0-1.512.266-2.983.734-4.359v-5.944H2.596a22.554 22.554 0 0 0 0 20.608l7.821-5.944" fill="#fbbc05"/><path d="M23.516 9.2c3.437 0 6.523 1.158 8.949 3.431L39.18 6.05C35.126 2.348 29.827.074 23.516.074c-9.151 0-17.07 5.141-20.92 12.64l7.821 5.944c1.841-5.423 7-9.459 13.1-9.459" fill="#ea4335"/></svg></span>
                        Option 3
                    </span>
                    </li>
                    <li><span class="enabled">Option 4</span></li>
                    <li><span class="enabled">Option 5</span></li>
                    <li><span class="enabled">Option 6</span></li>
                    <li><span class="enabled">Option 7</span></li>
                    <li><span class="enabled">Option 8</span></li>
                    <li><span class="enabled">Option 9</span></li>
                    <li><span class="enabled">Option 10</span></li>
                    <li><span class="enabled">Option 11</span></li>
                    <li><span class="enabled">Option 12</span></li>
                    <li><span class="enabled">Option 13</span></li>
                    <li><span class="enabled">Option 14</span></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="form-control-label">Dropdown toggle using a div example</label>
        <div class="form-control">
            <div class="btn dropdown-toggle">
                <span class="dropdown-selected-value">Option 3</span>
                <span class="dropdown-toggle-arrow"></span>
            </div>
        </div>
    </div>
</div>
<div class="dropdown open mod-menu">
    <button class="btn dropdown-toggle" type="button">
        <span class="dropdown-toggle-arrow"></span>
        mod-menu
    </button>
    <ul class="dropdown-menu">
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
    </ul>
</div>

<div class="dropdown open right">
    <button class="btn dropdown-toggle" type="button">
        <span class="dropdown-toggle-arrow"></span>
        mod-right
    </button>
    <ul class="dropdown-menu mod-right">
        <li><span>Item 1</span></li>
        <li><span>Really Long Item</span></li>
    </ul>
</div>

Flat select

A flat single select control.

Style sheet: /scss/controls/flat-select.scss

<div class="flat-select">
    <a class="flat-select-option" title="">Option 1</a>
    <a class="flat-select-option selectable" title="">Option 2</a>
    <a class="flat-select-option selectable" title="">Option 3</a>
</div>

<div class="flat-select mod-option-picker" style="width: 200px;">
    <a class="flat-select-option" title="">Option 1</a>
    <a class="flat-select-option selectable" title="">Option 2</a>
    <a class="flat-select-option selectable" title="">Option 3</a>
</div>

Prepended flat select

A flat single select control with a label.

Style sheet: /scss/controls/flat-select.scss

Label
10 20 30
<div class="prepended-flat-select">
    <div class="flat-select-prepend">
        Label
    </div>
    <div class="flat-select">
        <a class="flat-select-option" title="">10</a>
        <a class="flat-select-option selectable" title="">20</a>
        <a class="flat-select-option selectable" title="">30</a>
    </div>
</div>

Flat select modifiers

Modifiers for the Flat select control { mod-btn-group } .

Style sheet: /scss/controls/flat-select.scss

<div class="flat-select mod-btn-group">
    <a class="flat-select-option selectable"><span>Option 1</span></a>
    <a class="flat-select-option">Option 2</a>
    <a class="flat-select-option selectable">Option 3</a>
    <a class="flat-select-option selectable">
        <span class="icon-container">
            <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
            </svg>
        </span>
        Option 4
    </a>
    <a class="flat-select-option">
        <span class="icon-container">
            <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
            </svg>
        </span>
        Option 5
    </a>
</div>

Chosen single select

Controls using chosen library with a custom style to search result in a list inside a select.

Style sheet: /scss/controls/chosen.scss

<div class="mb2">
    <select class="chosen js-chosen-single-select">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
        <option value="Andorra">Andorra</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctica">Antarctica</option>
        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
        <option value="Argentina">Argentina</option>
    </select>
</div>
<div>
    <select class="chosen js-chosen-single-select-disabled" disabled>
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
        <option value="Andorra">Andorra</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctica">Antarctica</option>
        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
        <option value="Argentina">Argentina</option>
    </select>
</div>

<script>
    $('.js-chosen-single-select').chosen({
        allow_single_deselect: true
    });

    $('.js-chosen-single-select-disabled').chosen({
        allow_single_deselect: true
    });

    $('.js-chosen-single-select-disabled').find('.chosen-container').addClass('chosen-disabled');
</script>

Chosen multi select

Controls using chosen library with a custom style to search result in a list inside a select.

Style sheet: /scss/controls/chosen.scss

<select class="chosen js-chosen-multi-select" multiple style="width: 440px" data-placeholder="Choose a Country...">
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Anguilla">Anguilla</option>
    <option value="Antarctica">Antarctica</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
</select>
<script>
    $('.js-chosen-multi-select').chosen({
        display_selected_options: false
    });
</script>

Form controls

Almost all form controls grouped in a single coveo-form.

<div class="coveo-form">
    <fieldset class="form-group input-field">
        <input type="text" required/>
        <label>An input</label>
    </fieldset>

    <fieldset class="form-group input-field">
        <input type="text" required value="My value"/>
        <label>A filled input</label>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A checkbox</label> <!-- The form-control-label label is optional -->
        <div class="form-control">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button></button>
                <span class="label">Checked</span>
            </label>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A group of checkboxes</label>
        <div class="form-control coveo-checkbox-labels-group">
            <label class="coveo-checkbox-label coveo-checkbox-group-option">
                <input type="checkbox" class="coveo-checkbox">
                <button></button>
                <span class="label">Checkbox 1</span>
            </label>
            <label class="coveo-checkbox-label coveo-checkbox-group-option">
                <input type="checkbox" class="coveo-checkbox">
                <button></button>
                <span class="label">Checkbox 2</span>
            </label>
        </div>
    </fieldset>

    <label class="form-group coveo-checkbox-label">
        <input type="checkbox" class="coveo-checkbox">
        <button></button>
        <span class="label">A single checkbox (without a form-control-label)</span>
    </label>

    <fieldset class="form-group input-field">
        <input type="text" required placeholder="With a placeholder"/>
        <label>Another empty input</label>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A slide-toggle</label>
        <div class="form-control">
            <label class="coveo-slide-toggle-label">
                <input type="checkbox" class="coveo-slide-toggle">
                <button type="button"></button>
                <span class="toggle-label">Enabled</span>
            </label>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A slide-toggle-double</label>
        <div class="form-control">
            <span class="coveo-slide-toggle-double-container">
                <label class="coveo-slide-toggle-double first" for="DoubleChoice">Chose me</label>
                <input type="checkbox" class="coveo-slide-toggle-double" id="DoubleChoice"><span></span>
                <label class="coveo-slide-toggle-double second" for="DoubleChoice">Or me</label>
            </span>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">
            A dropdown
            <span class="inline-help-tooltip" title="A simple inline help text." data-placement="right">
                <span class="inline-help-icon"><svg viewbox="0 0 18 18"><path d="M9 0c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16.2c3.969 0 7.2-3.231 7.2-7.2S12.969 1.8 9 1.8 1.8 5.031 1.8 9s3.231 7.2 7.2 7.2zM8 6V4h2v2zm0 1h2v7H8z"/></svg></span>
            </span>
        </label>
        <div class="form-control">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="dropdown-toggle-arrow"></span>
                    Option 3
                </button>
                <ul class="dropdown-menu">
                    <li><span class="enabled" title="">Option 1</span></li>
                    <li><span class="enabled" title="">Option 2</span></li>
                    <li><span class="enabled" title="">Option 3</span></li>
                </ul>
            </div>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A flat select</label>
        <div class="form-control">
            <div class="flat-select">
                <button type="button" class="flat-select-option" title="">Option 1</button>
                <button type="button" class="flat-select-option selectable" title="">Option 2</button>
                <button type="button" class="flat-select-option selectable" title="">Option 3</button>
            </div>
        </div>
    </fieldset>

    <fieldset class="form-group">
        <label class="form-control-label">A flat select mod-btn-group</label>
        <div class="form-control">
            <div class="flat-select mod-btn-group">
                <button type="button" class="flat-select-option selectable"><span>Option 1</span></button>
                <button type="button" class="flat-select-option">Option 2</button>
                <button type="button" class="flat-select-option selectable">Option 3</button>
            </div>
        </div>
    </fieldset>
</div>

Multiline input

This is a serie of inputs to add multiple entries for the same field type.

Style sheet: /scss/controls/multiline-field.scss

    <div class="coveo-form">
        <div class="input-field multiline-field form-group">
            <ul></ul>
            <div class="input-wrapper">
                <input type="text" class="js-new-value-input" placeholder="Placeholder text" required>
                <label class="first-label">Multiline empty</label>
                <div class="input-actions">
                        <button class="js-add-value-button">
                            <i class="add-action" title="Add a new entry"></i>
                        </button>
                </div>
            </div>
        </div>
    
        <div class="input-field multiline-field form-group">
            <ul>
                <li class="input-wrapper">
                    <input type="text" class="js-value-input" value="First multiline value" required>
                    <label>Multiline one value entered</label>
                    <div class="input-actions">
                        <button class="js-delete-value-button" type="button">
                            <i class="delete-action" title="Delete this entry"></i>
                        </button>
                    </div>
                </li>
                <li class="input-wrapper">
                    <input type="text" class="js-value-input" value="Second multiline value" required>
                    <label>Multiline one value entered</label>
                    <div class="input-actions">
                        <button class="js-delete-value-button" type="button">
                            <i class="delete-action " title="Delete this entry"></i>
                        </button>
                    </div>
                </li>
            </ul>
            <div class="input-wrapper">
                <input type="text" class="js-new-value-input" placeholder="" required>
                <div class="input-actions">
                    <button class="js-add-value-button">
                        <i class="add-action" title="Add a new entry"></i>
                    </button>
                </div>
            </div>
        </div>
    
        <div class="input-field multiline-field form-group">
            <ul>
                <li class="input-wrapper">
                    <input type="text" class="" required value="First multiline value">
                    <label>Multiline one value entered</label>
                    <div class="input-actions">
                        <button class="js-delete-value-button" type="button">
                            <i class="delete-action" title="Delete this entry"></i>
                        </button>
                    </div>
                </li>
                <li class="input-wrapper validate">
                    <input type="text" class="valid" placeholder="" value="Multiline successful" required>
                    <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?"></label>
                    <div class="input-actions">
                        <button class="js-delete-value-button">
                            <i class="delete-action" title="Add a new entry"></i>
                        </button>
                    </div>
                </li>
            </ul>
            <div class="input-wrapper validate">
                <input type="text" placeholder="Placeholder text" required>
                <label data-valid-message="You dit it right!" data-invalid-message="Value must be a valid email address."></label>
                <div class="input-actions">
                    <button class="js-add-value-button">
                        <i class="add-action" title="Add a new entry"></i>
                    </button>
                </div>
            </div>
        </div>
    
        <div class="input-field multiline-field form-group">
            <div class="multiline-field-fields">
                <ul>
                    <li class="input-wrapper validate">
                        <input type="text" class="invalid" value="Multiline error 1" required>
                        <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?">Multiline one value
                            entered</label>
                        <div class="input-actions">
                            <button class="js-delete-value-button" type="button">
                                <i class="delete-action" title="Delete this entry"></i>
                            </button>
                        </div>
                    </li>
                    <li class="input-wrapper validate">
                        <input type="text" class="invalid" value="Multiline error 2" required>
                        <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?">Multiline one value
                            entered</label>
                        <div class="input-actions">
                            <button class="js-delete-value-button" type="button">
                                <i class="delete-action" title="Delete this entry"></i>
                            </button>
                        </div>
                    </li>
                </ul>
                <div class="input-wrapper validate">
                    <input type="text" placeholder="" required>
                    <label data-valid-message="You dit it right!" data-invalid-message="How is this possible?!?">Multiline one value
                        entered</label>
                    <div class="input-actions">
                        <button class="js-add-value-button">
                            <i class="add-action" title="Add a new entry"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    Progress bar

    Show a progression between 0 and 100%.

    Style sheet: /scss/elements/progress-bar.scss

    <div class="bg-medium-blue progress-bar-example-container">
      <div class="progress-bar" style="width: 400px;">
        <div class='progress'>
          <span class='progress-bar-completed' style="width: 40%;"></span>
        </div>
      </div>
    </div>
    
    <button class="btn mod-primary js-example-progress mt2">Test progression</button>
    
    <script>
      $('.js-example-progress').click(function(event){
        var parentEl = $(event.currentTarget).parent();
        if (parentEl) {
          var elementProgress = parentEl.find(".progress-bar-completed");
          // 40% of 400px : 160px
          if (elementProgress.css("width") == '160px') {
            elementProgress.css("width", '90%');
          } else {
            elementProgress.css("width", '40%');
          }
        }
      });
    </script>

    Step Progress bar

    Show a progression between steps.

    Style sheet: /scss/components/step-step-progress-bar.scss

    <div class="step-progress-bar-container">
      <div class="step-progress-bar step-progress-bar-done full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-done full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-done full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-doing full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
      <div class="step-progress-bar step-progress-bar-to-do full-content-x"></div>
    </div>
    <div class="form-group">
        <label class="form-control-label">Dropdown with selected option and filter box</label>
        <div class="form-control">
            <div class="dropdown mod-search mt1">
                <button class="btn dropdown-toggle dropdown-button-search-container mod-search" type="button" data-toggle="dropdown">
                    <span class="dropdown-selected-value">test 3</span>
                    <span class="dropdown-toggle-arrow"></span>
                </button>
                <div class="coveo-filter-container hidden">
                    <input type="text" class="filter-box" placeholder="Select an option">
                    <span class="hide"></span>
                    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
                        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
                    </svg>
                </div>
                <ul class="dropdown-menu">
                    <li><span>TEST 1</span></li>
                    <li><span>test 2</span></li>
                    <li><span class="state-selected">test 3</span></li>
                    <li><span>test 4</span></li>
                    <li><span>test 5</span></li>
                    <li><span>test 6</span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="dropdown mod-search">
        <div class="multiselect-input">
            <div class="selected-options-container">
                <div class="selected-option">
                    <div class="selected-option-value">Option 1</div>
                    <div class="remove-option">
                        <span>
                            <svg viewBox="0 0 10 10" class="icon fill-medium-blue mod-small">
                                <path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="selected-option">
                    <div class="selected-option-value">Option 2</div>
                    <div class="remove-option"><span>
                        <svg viewBox="0 0 10 10" class="icon fill-medium-blue mod-small">
                            <path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path>
                        </svg>
                    </span>
                    </div>
                </div>
                <input placeholder="Select options" value="">
            </div>
            <span class="">
                <div class="remove-all-selected-options"><span>
                    <svg viewBox="0 0 10 10" class="icon fill-medium-blue">
                        <path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path>
                    </svg>
                </span>
                </div>
            </span>
        </div>
    </div>

    File input

    Style sheet: /scss/controls/file-input.scss

    Choose file
    <div class="coveo-form">
        <div class="file-input">
            <div class="input-field file-path-wrapper">
                <input class="file-path" required placeholder="Placeholder text" type="text">
                <label>File input</label>
                <span class="hidden clear-file" title="Clear file">
                    <span class="icon fill-medium-grey">
                    <svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg>
                    </span>
                </span>
            </div>
            <div class="btn">
                <span>Choose file</span>
                <input type="file"/>
            </div>
        </div>
    </div>
    
    <script>
        $('input[type=file]').change(function() {
            var fileValue = this.files.length ? this.files[0].name : '';
            var $input = $(this).closest('.file-input').find('.file-path');
            $input.val(fileValue);
            $input.toggleClass('has-file', !!fileValue);
            $(this).closest('.file-input').find('.clear-file').toggleClass('hidden', !fileValue);
        });
        $('.clear-file').click(function() {
            var $input = $(this).closest('.file-input');
            var $path = $input.find('.file-path');
    
            $input.find('input[type=file]').val('');
            $path.val('');
            $path.removeClass('hasFile');
            $(this).addClass('hidden');
        });
    </script>