Checkbox .-horizontal (regroupé)

Checkbox .-horizontal - .complementary (regroupé)

Checkbox .-horizontal - Icône

Checkbox .-horizontal.has-error (regroupé)

Une sélection est obligatoire avec le formulaire checkbox

Checkbox .-horizontal disabled (regroupé)

          

HTML


PUG

include ../../../mixins/tarif.pug

.form-group-version2(role="group" aria-labelledby="group-checkbox-0-0-3")
  .wrapper-label
    .field-label
      p#group-checkbox-0-0-3 Checkbox .-horizontal (regroupé)
  .field-item.-form-check-version2.-horizontal
    .row
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-3', checked)#checkbox-input-3-0-0-1
          label(for='checkbox-input-3-0-0-1') 
            img(src='https://dummyimage.com/32x32/' alt='').img-fluid/
            span.wrapper-content 
              span Checkbox
              +tarif('span', 14.95, '€', 'mois', '', '', '-text-align-left -size-small -neutral', true)
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-3')#checkbox-input-3-0-0-2
          label(for='checkbox-input-3-0-0-2') 
            i.maificon.maificon-biens-sport(aria-hidden="true")
            span.wrapper-content 
              span Checkbox
              +tarif('span', 14.95, '€', 'mois', '', '', '-text-align-left -size-small -neutral', true)
          .wrapper-cta
            button.additional-cta(data-toggle='modal' data-target='#modal-inline-1' type='button')
              i.maificon.maificon-information-cercle(aria-hidden="true")
              span.sr-only Blabla 

.form-group-version2(role="group" aria-labelledby="group-checkbox-0-0-13")
  .wrapper-label
    .field-label
      p#group-checkbox-0-0-13 Checkbox .-horizontal - #[code .complementary] (regroupé)
  .field-item.-form-check-version2.-horizontal
    .row
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-13', checked)#checkbox-input-3-0-0-11
          label(for='checkbox-input-3-0-0-11') 
            img(src='https://dummyimage.com/32x32/' alt='').img-fluid/
            span.wrapper-content 
              span Prénom Nom
                span.complementary (conjoint sociétaire)
          .wrapper-cta
            button.additional-cta(data-toggle='modal' data-target='#modal-inline-1' type='button')
              i.maificon.maificon-information-cercle(aria-hidden="true")
              span.sr-only Blabla 
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-13', checked)#checkbox-input-3-0-0-13
          label(for='checkbox-input-3-0-0-13') 
            img(src='https://dummyimage.com/32x32/' alt='').img-fluid/
            span.wrapper-content 
              span Prénom Nom
                span.complementary (autre membre du foyer)
          .wrapper-cta
            button.additional-cta(data-toggle='modal' data-target='#modal-inline-1' type='button')
              i.maificon.maificon-information-cercle(aria-hidden="true")
              span.sr-only Blabla 

.form-group-version2(role="group" aria-labelledby="group-checkbox-0-0-13")
  .wrapper-label
    .field-label
      p#group-checkbox-0-0-13 Checkbox .-horizontal - Icône
  .field-item.-form-check-version2.-horizontal
    .row
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-13', checked)#checkbox-input-3-0-0-113
          label(for='checkbox-input-3-0-0-113') 
            span.wrapper-content 
              span Prénom Nom
              span.complementary JJ/MM/AAAA
          .wrapper-cta
            button.additional-cta(data-toggle='modal' data-target='#modal-inline-1' type='button')
              i.maificon.maificon-cross(aria-hidden="true")
              span.sr-only Supprimer la ligne

.form-group-version2.has-error(role="group" aria-labelledby="group-checkbox-0-0-2 error-inline-01") 
  .wrapper-label
    .field-label
      p#group-checkbox-0-0-2 Checkbox .-horizontal.has-error (regroupé)
  .field-item.-form-check-version2.-horizontal
    .row
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-2')#checkbox-input-2-0-0-1
          label(for='checkbox-input-2-0-0-1') 
            i.maificon.maificon-biens-sport(aria-hidden="true")
            span.wrapper-content 
              span Checkbox
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-2')#checkbox-input-2-0-0-2
          label(for='checkbox-input-2-0-0-2') 
            i.maificon.maificon-biens-sport(aria-hidden="true")
            span.wrapper-content 
              span Checkbox
  .help-block 
    p#error-inline-01 Une sélection est obligatoire avec le formulaire checkbox
  
.form-group-version2(role="group" aria-labelledby="group-checkbox-0-0-1")
  .wrapper-label
    .field-label
      p#group-checkbox-0-0-1 Checkbox .-horizontal disabled (regroupé)
  .field-item.-form-check-version2.-horizontal
    .row
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-1', disabled)#checkbox-input-0-0-1
          label(for='checkbox-input-0-0-1') 
            span.wrapper-content 
              span Checkbox
      .col-md-12
        .item
          input(type='checkbox' name='checkbox-input-0-0-1', disabled)#checkbox-input-0-0-2
          label(for='checkbox-input-0-0-2') 
            span.wrapper-content 
              span Checkbox