HTML
            


            
PUG
            
.form-group
  label(for="group-1") Case à cocher defaut
  .field-item.form-checkbox-collapse#group-1(role="group")
    .checkbox-collapse
      input(type='checkbox' name='check-example1', checked)#check-example-11
      .checkbox-collapse-label
        label(for='check-example-11') Case à cocher 1 
          a(href='#') avec un lien
    .checkbox-collapse
      input(type='checkbox' name='check-example1')#check-example-12
      .checkbox-collapse-label
        label(for='check-example-12') Case à cocher 2 (avec collapse)
.form-group
  label(for="group-2") Case à cocher désactivé
  .field-item.form-checkbox-collapse#group-2(role="group")
    .checkbox-collapse
      input(type='checkbox' name='check-example2', checked, disabled)#check-example-21
      .checkbox-collapse-label
        label(for='check-example-21') Case à cocher désactivé 1
    .checkbox-collapse
      input(type='checkbox' name='check-example2', disabled)#check-example-22
      .checkbox-collapse-label
        label(for='check-example-22') Case à cocher désactivé 2
.form-group
  label(for="group-3") Case à cocher en erreur
  .field-item.form-checkbox-collapse.has-error#group-3(role="group")
    .checkbox-collapse
      input(type='checkbox' name='check-example3')#check-example-31
      .checkbox-collapse-label
        label(for='check-example-31') Case à cocher erreur 1
    .checkbox-collapse
      input(type='checkbox' name='check-example3')#check-example-32
      .checkbox-collapse-label
        label(for='check-example-32') Case à cocher erreur 2
  p.help-block Veuillez faire une sélection

.form-group
  label#group-5 Case à cocher avec pictos
  .field-item
    .row
      .form-checkbox-picto.col-md-3
        .checkbox-picto.checkbox-full-width
          input#check-example-51(role="checkbox" type='checkbox' aria-label="Sport")
          label(for='check-example-51') 
            i.maificon.reverse.maificon-biens-sport(aria-hidden="true")
            .label-detail Sport
      .form-checkbox-picto.col-md-3
        .checkbox-picto.checkbox-full-width
          input#check-example-52(role="checkbox" type='checkbox' aria-label="Repas")
          label(for='check-example-52') 
            i.maificon.reverse.maificon-fourchette-couteau(aria-hidden="true")
            .label-detail Repas
      .form-checkbox-picto.col-md-3
        .checkbox-picto.checkbox-full-width
          input#check-example-53(role="checkbox" type='checkbox' aria-label="Jeux de société")
          label(for='check-example-53') 
            i.maificon.reverse.maificon-pions-echec-jeux-de-societe(aria-hidden="true")
            .label-detail Jeux de société
      .form-checkbox-picto.col-md-3
        .checkbox-picto.checkbox-full-width
          input#check-example-54(role="checkbox" type='checkbox' aria-label="Vente de produits ")
          label(for='check-example-54') 
            i.maificon.reverse.maificon-chariot(aria-hidden="true")
            .label-detail Vente de produits
.row
  .form-checkbox-picto.has-error.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-55(role="checkbox" type='checkbox' aria-label="Sport")
      label(for='check-example-55') 
        i.maificon.reverse.maificon-biens-sport(aria-hidden="true")
        .label-detail Sport
  .form-checkbox-picto.has-error.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-56(role="checkbox" type='checkbox' aria-label="Repas")
      label(for='check-example-56') 
        i.maificon.reverse.maificon-fourchette-couteau(aria-hidden="true")
        .label-detail Repas
  .form-checkbox-picto.has-error.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-57(role="checkbox" type='checkbox' aria-label="Jeux de société")
      label(for='check-example-57') 
        i.maificon.reverse.maificon-pions-echec-jeux-de-societe(aria-hidden="true")
        .label-detail Jeux de société
  .form-checkbox-picto.has-error.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-58(role="checkbox" type='checkbox' aria-label="Vente de produits ")
      label(for='check-example-58') 
        i.maificon.reverse.maificon-chariot(aria-hidden="true")
        .label-detail Vente de produits
  .col-md-12
    p.help-block Veuillez faire une sélection

br
.row
  .form-checkbox-picto.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-59(role="checkbox" type='checkbox' aria-label="Sport" disabled)
      label(for='check-example-59') 
        i.maificon.reverse.maificon-biens-sport(aria-hidden="true")
        .label-detail Sport
  .form-checkbox-picto.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-60(role="checkbox" type='checkbox' aria-label="Repas" disabled)
      label(for='check-example-60') 
        i.maificon.reverse.maificon-fourchette-couteau(aria-hidden="true")
        .label-detail Repas
  .form-checkbox-picto.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-61(role="checkbox" type='checkbox' aria-label="Jeux de société" disabled)
      label(for='check-example-61') 
        i.maificon.reverse.maificon-pions-echec-jeux-de-societe(aria-hidden="true")
        .label-detail Jeux de société
  .form-checkbox-picto.col-md-3
    .checkbox-picto.checkbox-full-width
      input#check-example-62(role="checkbox" type='checkbox' aria-label="Vente de produits" disabled)
      label(for='check-example-62') 
        i.maificon.reverse.maificon-chariot(aria-hidden="true")
        .label-detail Vente de produits