Default accessible

Default (.disabled)

Default (.validation)

Default (.toggle-no-bg) (iso prod)

Default (.small) (only desktop)

          

HTML


PUG

label Default (structure ISO PROD LEGACY)
.form-group.switch
  span
    input(type='radio', name='switch-example-01', onchange='console.log("test1")')#switch-example-01-non.switch-non
    label(for='switch-example-01-non') Réponse a
  input(type='radio', name='switch-example-01', onchange='console.log("test2")', checked)#switch-example-01-oui.switch-oui
  .toggle-switch
    .toggle-switch-btn
      i.maificon.maificon-grip(aria-hidden='true')
  label(for='switch-example-01-oui') Réponse b
  
.form-group(role="radiogroup" aria-labelledby="label-switch-1")
  p.field-label#label-switch-1 Default accessible
  .field-item.switch
    span
      input#switch-example-1-non.switch-non(type='radio' name='switch-example-1')
      label(for='switch-example-1-non') Réponse a
    input#switch-example-1-oui.switch-oui(type='radio' name='switch-example-1' checked)
    .toggle-switch
        .toggle-switch-btn
    label(for='switch-example-1-oui') Réponse b

.form-group(role="radiogroup" aria-labelledby="label-switch-disabled")
  p.field-label#label-switch-disabled Default (.disabled)
  .field-item.switch.disabled
    span
      input#switch-example-2-non.switch-non(type='radio' name='switch-example-2' disabled)
      label(for='switch-example-2-non') Réponse a
    input#switch-example-2-oui.switch-oui(type='radio' name='switch-example-2' disabled checked)
    .toggle-switch
        .toggle-switch-btn
    label(for='switch-example-2-oui') Réponse b

.form-group(role="radiogroup" aria-labelledby="label-switch-3")
  p.field-label#label-switch-3 Default (.validation)
  .field-item.switch.validation
    span
      input#switch-example-3-non.switch-non(type='radio' name='switch-example-3')
      label(for='switch-example-3-non') Réponse a
    input#switch-example-3-oui.switch-oui(type='radio' name='switch-example-3' checked)
    .toggle-switch
        .toggle-switch-btn
    label(for='switch-example-3-oui') Réponse b

.form-group(role="radiogroup" aria-labelledby="label-switch-34")
  p.field-label#label-switch-34 Default (.toggle-no-bg) (iso prod)
  .field-item.switch.validation
    span
      input#switch-example-34-non.switch-non(type='radio' name='switch-example-34')
      label(for='switch-example-34-non') Réponse a
    input#switch-example-34-oui.switch-oui(type='radio' name='switch-example-34' checked)
    .toggle-switch.toggle-no-bg
        .toggle-switch-btn
    label(for='switch-example-34-oui') Réponse b

.form-group(role="radiogroup" aria-labelledby="label-switch-4")
  p.field-label#label-switch-4 Default (.small) (only desktop)
  .field-item.switch.small
    span
      input#switch-example-4-non.switch-non(type='radio' name='switch-example-4')
      label(for='switch-example-4-non') Réponse a
    input#switch-example-4-oui.switch-oui(type='radio' name='switch-example-4' checked)
    .toggle-switch
        .toggle-switch-btn
    label(for='switch-example-4-oui') Réponse b