Version

Démarrer

Design system ?
Présentation de Trilogy
L'installation
Les performances
Accessibilité
Changelog
Releases

Guide pratique

Sémantique des pages
Contenu éditorial
Contenu graphique
Composants

Structure d'une page

Page de base
Les colonnes
Les rangées

Guide des styles

Couleurs
Listes (ul, dl)
Helpers
Icones
Typographie
Z-Index

Composants

Accordion
Badge
Box
Breadcrumb
Button & Link
Card
Checkradio
Countdown
Disclaimer
Divider
Entry
Footer
Form
Hero
Icon
Loader
Menu
Modal
Navbar
Notification
Option
Otp
Pagination
Popover
Price
Pricing Table
Product Tour
Progress Bar
Select
Slice
Slider
Stepper
Sticker
Table
Tab
Tag
Timeline
Title & text
Toolbar
Transfert

Checkradio

Champs de types CHECKBOX, RADIO, SWITCH. Les éléments du formulaire doivent être contenus dans une balise <form></form>.

Éléments de formulaire

Aperçu

Mode responsive

Checkbox

Radio

Switch

                                                                <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-demo" type="checkbox">
                                            <label for="checkbox-demo">Checkbox</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="radio-demo" value="">
                                            <label for="radio-demo">Radio</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio" type="checkbox" id="switch-demo">
                                            <label for="switch-demo">Switch</label>
                                        </div>
                                    </div>

ACCESSIBILITY

Chaque checkbox, radio et switch doit avoir un label le décrivant pour rester conforme aux exigences d'accessibilité. Le label doit être lié au checkradio au moyen d'une correspondance id / for et positionné à proximité du checkradio ; voir ci-dessus

Checkbox

Aperçu

Mode responsive

Cochez-moi

Décochez-moi

Ne me cochez pas

Ne me décochez pas

                                                                <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-unchecked" type="checkbox">
                                            <label for="checkbox-unchecked">Cochez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-checked" type="checkbox" checked="true">
                                            <label for="checkbox-checked">Décochez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-unchecked-disabled" type="checkbox" disabled="">
                                            <label for="checkbox-unchecked-disabled">Ne me cochez pas</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio" id="checkbox-checked-disabled" type="checkbox" checked="true" disabled="">
                                            <label for="checkbox-checked-disabled">Ne me décochez pas</label>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

Cochez-moi

Décochez-moi

Ne me cochez pas

Ne me décochez pas

                                                                <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio is-inverted" id="checkbox-unchecked-inverted" type="checkbox">
                                            <label for="checkbox-unchecked-inverted">Cochez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio is-inverted" id="checkbox-checked-inverted" type="checkbox" checked="true">
                                            <label for="checkbox-checked-inverted">Décochez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio is-inverted" id="checkbox-unchecked-disabled-inverted" type="checkbox" disabled="">
                                            <label for="checkbox-unchecked-disabled-inverted">Ne me cochez pas</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="is-checkradio is-inverted" id="checkbox-checked-disabled-inverted" type="checkbox" checked="true" disabled="">
                                            <label for="checkbox-checked-disabled-inverted">Ne me décochez pas</label>
                                        </div>
                                    </div>

Lorsqu'une checkbox se trouve dans un bloc à fond coloré, alors il faut lui ajouter la classe is-inverted.

Radio

Aperçu

Mode responsive

Activez-moi…

… ou moi !

Vous ne pouvez pas m'activer…

… ou me désactiver !

                                                                <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="radio-unchecked" value="">
                                            <label for="radio-unchecked">Activez-moi…</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="radio-checked" checked="true">
                                            <label for="radio-checked">… ou moi !</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="radio-unchecked-disabled" value="" disabled="">
                                            <label for="radio-unchecked-disabled">Vous ne pouvez pas m'activer…</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="radio-checked-disabled" checked="true" disabled="">
                                            <label for="radio-checked-disabled">… ou me désactiver !</label>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

Activez-moi…

… ou moi !

Vous ne pouvez pas m'activer…

… ou me désactiver !

                                                                <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio is-inverted" type="radio" id="radio-unchecked-inverted" value="">
                                            <label for="radio-unchecked-inverted">Activez-moi…</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio is-inverted" type="radio" id="radio-checked-inverted" checked="true">
                                            <label for="radio-checked-inverted">… ou moi !</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio is-inverted" type="radio" id="radio-unchecked-disabled-inverted" value="" disabled="">
                                            <label for="radio-unchecked-disabled-inverted">Vous ne pouvez pas m'activer…</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio is-inverted" type="radio" id="radio-checked-disabled-inverted" checked="true" disabled="">
                                            <label for="radio-checked-disabled-inverted">… ou me désactiver !</label>
                                        </div>
                                    </div>

Lorsqu'un bouton radio se trouve dans un bloc à fond coloré, alors il faut lui ajouter la classe is-inverted.

Switch

Aperçu

Mode responsive

Activez-moi

Désactivez-moi

                                                                <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio" type="checkbox" id="switch-unchecked">
                                            <label for="switch-unchecked">Activez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio" type="checkbox" id="switch-checked" checked="true">
                                            <label for="switch-checked">Désactivez-moi</label>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

Activez-moi

Désactivez-moi

                                                                <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio is-inverted" type="checkbox" id="switch-unckecked-inverted">
                                            <label for="switch-unckecked-inverted">Activez-moi</label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="switch is-checkradio is-inverted" type="checkbox" id="switch-checked-inverted" checked="true">
                                            <label for="switch-checked-inverted">Désactivez-moi</label>
                                        </div>
                                    </div>

Voir l'exemple ci-dessus

Lorsqu'un switch se trouve dans un bloc à fond coloré, alors il faut lui ajouter la classe .is-inverted. Les couleurs seront inversé.

WARNING

Voici d'autres boutons existants, mais ils ne doivent pas être utilisés côtés client :

Switch avec la classe : is-success

Switch avec la classe : is-info

Switch avec la classe : is-warning

Switch avec la classe : is-error

Dans ce cas, préciser le sens sémantique (ex : "Attention") dans le texte ou l'aria-label du switch pour rester conforme aux exigences d'accessibilité.

Avec texte descriptif en supplément

Avec un texte descriptif en supplément

Aperçu

Mode responsive

Activez-moi… Proident Lorem ad ea laboris fugiat. Amet consectetur ea consectetur sint irure id labore. Duis Lorem incididunt irure ullamco anim enim est.

                                                                <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="radio" id="descriptive-radio" value="">
                                            <label for="descriptive-radio" class="is-descriptive">
                                                Activez-moi…
                                                <span>Proident Lorem ad ea laboris fugiat. Amet consectetur ea consectetur sint irure id labore. Duis
                                                    Lorem incididunt irure ullamco anim enim est.</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <input class="input is-checkradio" type="checkbox" id="descriptive-checkbox" value="">
                                            <label for="descriptive-checkbox" class="is-descriptive">
                                                Activez-moi…
                                                <span>Proident Lorem ad ea laboris fugiat. Amet consectetur ea consectetur sint irure id labore. Duis
                                                    Lorem incididunt irure ullamco anim enim est.</span>
                                            </label>
                                        </div>
                                    </div>

Si on souhaite ajouter un texte descriptif pour un bouton radio ou une checkbox alors il faut ajouter sur le label la classe is-descriptive et englober la description dans une balise span.