Option

Les boutons radios permettent de faire un choix parmi plusieurs options.

Code de base

Les options de base sont cochées ou décochées ou désactivées.

Aperçu

Mode responsive

Décochée

Cochée

Désactivée

                                                        <div class="options">
                                <div class="field">
                                    <div class="control">
                                        <input type="radio" id="item1" name="example1" value="">
                                        <label for="item1">Décochée</label>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="control">
                                        <input type="radio" id="item2" name="example1" value="" checked="">
                                        <label for="item2">Cochée</label>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="control">
                                        <input type="radio" id="item3" name="example1" value="" disabled="">
                                        <label for="item3">Désactivée</label>
                                    </div>
                                </div>
                            </div>

DO

Ajoutez la classe is-inverted lorsque les options se trouvent sur un fond coloré, afin d'inverser les couleurs.

Icône

Une icône peut être mise à droite de l'option grâce à la classe has-icon ajoutée sur le container de l'option.

Aperçu

Mode responsive

Décochée

Cochée

Désactivée

                                                        <div class="options">
                                <div class="field has-icon">
                                    <div class="control">
                                        <input type="radio" id="item4" name="example2" value="">
                                        <label for="item4">
                                            Décochée
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <div class="field has-icon">
                                    <div class="control">
                                        <input type="radio" id="item5" name="example2" value="" checked="">
                                        <label for="item5">
                                            Cochée
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <div class="field has-icon">
                                    <div class="control">
                                        <input type="radio" id="item6" name="example2" value="" disabled="">
                                        <label for="item6">
                                            Désactivée
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>

Icône et texte

Une icône et un texte peuvent être ajoutés au-dessus de l'option grâce à la classe is-multiline. Le positionnement de la coche de sélection est alors différent des autres déclinaisons. On retrouve aussi le même fonctionnement que pour le composant Checkradio : la classe is-descriptive sur le label permet d'ajouter une descrition au libellé.

Aperçu

Mode responsive

Décochée Anim irure aute anim minim adipisicing ad nulla.

Cochée Anim irure aute anim minim adipisicing ad nulla.

Désactivée Anim irure aute anim minim adipisicing ad nulla.

                                                        <div class="options">
                                <div class="field is-multiline">
                                    <div class="control">
                                        <input type="radio" id="item7" name="example3" value="">
                                        <label for="item7" class="is-descriptive">
                                            Décochée
                                            <span>Anim irure aute anim minim adipisicing ad nulla.</span>
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <div class="field is-multiline">
                                    <div class="control">
                                        <input type="radio" id="item8" name="example3" value="" checked="">
                                        <label for="item8" class="is-descriptive">
                                            Cochée
                                            <span>Anim irure aute anim minim adipisicing ad nulla.</span>
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <div class="field is-multiline">
                                    <div class="control">
                                        <input type="radio" id="item9" name="example3" value="" disabled="">
                                        <label for="item9" class="is-descriptive">
                                            Désactivée
                                            <span>Anim irure aute anim minim adipisicing ad nulla.</span>
                                            <span class="icon" aria-label="Icone d'option">
                                                <i class="tri-archiving" aria-hidden="true"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>

Image

Une image peut être mise à la place de l'icône grâce à la classe has-image

Aperçu

Mode responsive

Exemple de la page d'accueil de l'application
Avec les montants en € du hors forfait

Exemple de la page d'accueil de l'application
Sans les montants en € du hors forfait

                                                                <div class="options">
                                        <div class="field is-multiline has-image">
                                            <div class="control">
                                                <input type="radio" id="item10" name="hors_forfait" value="1">
                                                <label for="item10" class="is-descriptive">
                                                    <span class="img">
                                                        <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                                    </span>
                                                    Exemple de la page d'accueil de l'application<br>
                                                    <span class="text is-2">Avec les montants en € du hors forfait</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="field is-multiline has-image">
                                            <div class="control">
                                                <input type="radio" id="item11" name="hors_forfait" value="0">
                                                <label for="item11" class="is-descriptive">
                                                    <span class="img">
                                                        <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                                    </span>
                                                    Exemple de la page d'accueil de l'application<br>
                                                    <span class="text is-2">Sans les montants en € du hors forfait</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

Exemple de la page d'accueil de l'application
Avec les montants en € du hors forfait

Exemple de la page d'accueil de l'application
Sans les montants en € du hors forfait

                                                                <div class="options is-inverted">
                                        <div class="field is-multiline has-image">
                                            <div class="control">
                                                <input type="radio" id="item12" name="hors_forfait" value="1">
                                                <label for="item12" class="is-descriptive">
                                                    <span class="img">
                                                        <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                                    </span>
                                                    Exemple de la page d'accueil de l'application<br>
                                                    <span class="text is-1">Avec les montants en € du hors forfait</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="field is-multiline has-image">
                                            <div class="control">
                                                <input type="radio" id="item13" name="hors_forfait" value="0">
                                                <label for="item13" class="is-descriptive">
                                                    <span class="img">
                                                        <img src="/card-sample.200bd9f7.png" alt="placeholder">
                                                    </span>
                                                    Exemple de la page d'accueil de l'application<br>
                                                    <span class="text is-1">Sans les montants en € du hors forfait</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

DO

Ajoutez la classe is-inverted lorsque les options se trouvent sur un fond coloré, afin d'inverser les couleurs.

Option sans input

Option sans l'input visible grâce à la classe has-no-input

Aperçu

Mode responsive

Appliquer aux SIREN sélectionné

Appliquer à tous les SIREN

                                                                <div class="options has-no-input">
                                        <div class="field">
                                            <div class="control">
                                                <input type="radio" id="item14" name="siren_option" value="0">
                                                <label for="item14">Appliquer aux SIREN sélectionné</label>
                                            </div>
                                        </div>
                                        <div class="field">
                                            <div class="control">
                                                <input type="radio" id="item15" name="siren_option" value="1">
                                                <label for="item15">Appliquer à tous les SIREN</label>
                                            </div>
                                        </div>
                                    </div>