Select

Champs de type SELECT. Ces éléments doivent être contenu dans une balise <form></form>

Champ de sélection

Le champ de sélection permet à l’utilisateur, par simple clic sur la flèche de la liste déroulante, d’afficher plusieurs options afin d’en choisir une seule. Dans le cas ou le choix d’options est limité il est recommandé d’utiliser des boutons radio (présentés ci-dessous).

Aperçu

Mode responsive

Filtrer par Catégories

                                                                <div class="field">
                                        <div class="control">
                                            <div class="select">
                                                <select aria-label="Dropdown basique">
                                                    <option>Select dropdown</option>
                                                    <option>With options</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <div class="select">
                                                <select aria-label="Dropdown présélectionné">
                                                    <option>Internet et Multimedia</option>
                                                    <option>Gestion</option>
                                                    <option selected="selected">Bons Plans</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control has-dynamic-placeholder">
                                            <div class="select">
                                                <select id="dynamic-placeholder-light">
                                                    <option>Internet et Multimedia</option>
                                                    <option>Gestion</option>
                                                    <option>Bons Plans</option>
                                                </select>
                                                <label for="dynamic-placeholder-light">Filtrer par Catégories</label>
                                            </div>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

Filtrer par Catégories

                                                                    <div class="field">
                                            <div class="control">
                                                <div class="select is-inverted">
                                                    <select aria-label="Dropdown basique">
                                                        <option>Select dropdown</option>
                                                        <option>With options</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="field">
                                            <div class="control">
                                                <div class="select is-inverted">
                                                    <select aria-label="Dropdown présélectionné">
                                                        <option>Internet et Multimedia</option>
                                                        <option>Gestion</option>
                                                        <option selected="selected">Bons Plans</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="field">
                                            <div class="control has-dynamic-placeholder">
                                                <div class="select is-inverted">
                                                    <select id="dynamic-placeholder-dark">
                                                        <option>Internet et Multimedia</option>
                                                        <option>Gestion</option>
                                                        <option>Bons Plans</option>
                                                    </select>
                                                    <label for="dynamic-placeholder-dark">Filtrer par Catégories</label>
                                                </div>
                                            </div>
                                        </div>

ACCESSIBILITY

Les champs de sélection doivent avoir un label les décrivant pour rester conforme aux exigences d'accessibilité :

Un champ de sélection sans label visible doit posséder l'attribut aria-label

<div class="select">
    <select aria-label="Sélectionner la langue">
        <option>Français (FR)</option>
        <option>English (US)</option>
    </select>
<div>

Un champ de sélection avec label visible doit lier le champ et le label au moyen d'une correspondance id / for

<div class="select">
    <select id="country-code">
        <option>+33 (FR)</option>
        <option>+1 (US)</option>
    </select>
    <label for="country-code">Préfixe téléphonique</label>
<div>

Dropdown
draft

Le dropdown permet à l’utilisateur, par simple clic sur la flèche de la liste déroulante, d’afficher plusieurs options afin d’en choisir une ou plusieurs.

Aperçu

Mode responsive

                                                                    <div class="field">
                                                <div class="control">
                                                    <div class="dropdown js-dropdown-isactive">
                                                        <div class="dropdown-trigger">
                                                            <div class="field">
                                                                <div class="control has-dynamic-placeholder has-dynamic-placeholder-select">
                                                                    <div class="select">
                                                                        <select id="filter_bte" name="siren" placeholder="Siren"></select>
                                                                        <label for="filter_bte" class="input-dynamic-placeholder">Siren</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-menu">
                                                            <div class="dropdown-content">
                                                                <div class="dropdown-item">
                                                                    <a class="link">123456789</a>
                                                                </div>
                                                                <div class="dropdown-item">
                                                                    <a class="link">567891234</a>
                                                                </div>
                                                                <div class="dropdown-item">
                                                                    <a class="link">987654321</a>
                                                                </div>
                                                                <div class="dropdown-item">
                                                                    <a class="link">543216789</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

Autocomplete

L'autocomplete permet, au fur et à mesure que l'utilisateur saisit du texte dans un champ d'édition, d'afficher une liste de suggestions dans une liste déroulante.

Aperçu

Mode responsive

Autocomplete

                                                                <div class="field">
                                            <div class="control">
                                                <div data-autocomplete-context="" class="is-autocomplete">
                                                    <div class="autocomplete-trigger">
                                                        <div class="field">
                                                            <div class="control has-dynamic-placeholder">
                                                                <input data-autocomplete-input="" id="autocomplete" class="input autocomplete-input" name="autocomplete" placeholder="Autocomplete">
                                                                <label for="autocomplete" class="input-dynamic-placeholder">Autocomplete</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div role="list" data-autocomplete-menu="" class="autocomplete-menu">
                                                        <div role="listitem" class="autocomplete-item">name</div>
                                                        <div role="listitem" class="autocomplete-item">age</div>
                                                        <div role="listitem" class="autocomplete-item">car</div>
                                                        <div role="listitem" class="autocomplete-item">test</div>
                                                        <div role="listitem" class="autocomplete-item">trilogy</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

Autocomplete absolute

• La classe is-absolute doit être ajouté sur le menu déroulant

Aperçu

Mode responsive

Autocomplete

                                                                <div class="field">
                                            <div class="control">
                                                <div data-autocomplete-context="" class="is-autocomplete">
                                                    <div class="autocomplete-trigger">
                                                        <div class="field">
                                                            <div class="control has-dynamic-placeholder">
                                                                <input data-autocomplete-input="" id="autocomplete" class="input autocomplete-input" name="autocomplete" placeholder="Autocomplete">
                                                                <label for="autocomplete" class="input-dynamic-placeholder">Autocomplete</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div data-autocomplete-menu="" class="autocomplete-menu is-absolute">
                                                        <div class="autocomplete-item">name</div>
                                                        <div class="autocomplete-item">age</div>
                                                        <div class="autocomplete-item">car</div>
                                                        <div class="autocomplete-item">test</div>
                                                        <div class="autocomplete-item">trilogy</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

Autocomplete liste vers le haut en absolute

• La classe is-absolute-top doit être ajouté sur le menu déroulant

Aperçu

Mode responsive

Autocomplete

                                                                <div class="field">
                                            <div class="control">
                                                <div data-autocomplete-context="" class="is-autocomplete">
                                                    <div class="autocomplete-trigger">
                                                        <div class="field">
                                                            <div class="control has-dynamic-placeholder">
                                                                <input data-autocomplete-input="" id="autocomplete" class="input autocomplete-input" name="autocomplete" placeholder="Autocomplete">
                                                                <label for="autocomplete" class="input-dynamic-placeholder">Autocomplete</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div data-autocomplete-menu="" class="autocomplete-menu is-absolute-top">
                                                        <div class="autocomplete-item">name</div>
                                                        <div class="autocomplete-item">age</div>
                                                        <div class="autocomplete-item">car</div>
                                                        <div class="autocomplete-item">test</div>
                                                        <div class="autocomplete-item">trilogy</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

Select

Champs de type SELECT. Ces éléments doivent être contenu dans une balise <form></form>

Champ de sélection

Dropdown draft

Autocomplete

Autocomplete absolute

Autocomplete liste vers le haut en absolute

Dropdown
draft