HTML
            


            
PUG
            
//- Composant Stepper

  TODO: ajouter la description du composant Stepper

  {@link https://www.figma.com/design/eMXYZgCoXTAbLfB5tbUbUi/Stepper Documentation Figma}
  {@link https://www.figma.com/design/dSx5p5nriVB8oc2ddACFb6/4801-Stepper?node-id=29480-1002 Composant Figma}
  {@link https://www.figma.com/design/T5FHYx2wdxfrljyvbUJQr0/4831---Composant-Counter?node-id=29867-14024 Composant Figma}
  {@link https://maquettes.tools.df.maif.io/katya/stepper.html#stepper Composant Katya}
  {@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-stepper--docs Composant React}

.form-group-version2(role="radiogroup" aria-labelledby="group-radio-stepper-aytcpb")
  .wrapper-label
    .field-label
      p#group-radio-stepper-aytcpb.field-label Composant stepper (radio regroupé)
  .field-item.-stepper
    .choix
      input#stepper-aytcpb-0(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-0') 0
    .choix
      input#stepper-aytcpb-1(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-1') 1
    .choix
      input#stepper-aytcpb-2(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-2') 2
    .choix
      input#stepper-aytcpb-3(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-3') 3
    .choix 
      input#stepper-aytcpb-4(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-4') 4
    .choix
      input#stepper-aytcpb-5(type='radio', name='stepper-aytcpb')
      label(for='stepper-aytcpb-5') 5

.form-group-version2.has-success(role="radiogroup" aria-labelledby="group-radio-stepper-ulzzsl" tabindex="-1")
  .wrapper-label
    .field-label
      p#group-radio-stepper-ulzzsl.field-label Composant stepper (radio regroupé)
  .field-item.-stepper
    .choix
      input#stepper-ulzzsl-0(type='radio', name='stepper-ulzzsl')
      label(for='stepper-ulzzsl-0') 0
    .choix
      input#stepper-ulzzsl-1(type='radio', name='stepper-ulzzsl')
      label(for='stepper-ulzzsl-1') 1
    .choix
      input#stepper-ulzzsl-2(type='radio', name='stepper-ulzzsl' checked="checked")
      label(for='stepper-ulzzsl-2') 2
    .choix
      input#stepper-ulzzsl-3(type='radio', name='stepper-ulzzsl')
      label(for='stepper-ulzzsl-3') 3
    .choix 
      input#stepper-ulzzsl-4(type='radio', name='stepper-ulzzsl')
      label(for='stepper-ulzzsl-4') 4
    .choix
      input#stepper-ulzzsl-5(type='radio', name='stepper-ulzzsl')
      label(for='stepper-ulzzsl-5') 5+

.form-group-version2.has-error(role="radiogroup" aria-labelledby="group-radio-stepper-brboxn" aria-describedby="error-stepper-brboxn" tabindex="-1")
  .wrapper-label
    .field-label
      p#group-radio-stepper-brboxn.field-label Composant stepper (radio regroupé)
  .field-item.-stepper
    .choix
      input#stepper-brboxn-0(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-0') 0
    .choix
      input#stepper-brboxn-1(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-1') 1
    .choix
      input#stepper-brboxn-2(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-2') 2
    .choix
      input#stepper-brboxn-3(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-3') 3
    .choix 
      input#stepper-brboxn-4(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-4') 4
    .choix
      input#stepper-brboxn-5(type='radio', name='stepper-brboxn')
      label(for='stepper-brboxn-5') 5+
  .help-block
    p#error-stepper-brboxn Veuillez sélectionner une valeur

.form-group-version2.has-warning(role="radiogroup" aria-labelledby="group-radio-stepper-axehpc" aria-describedby="error-stepper-axehpc" tabindex="-1")
  .wrapper-label
    .field-label
      p#group-radio-stepper-axehpc.field-label Composant stepper (radio regroupé)
  .field-item.-stepper
    .choix
      input#stepper-axehpc-0(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-0') 0
    .choix
      input#stepper-axehpc-1(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-1') 1
    .choix
      input#stepper-axehpc-2(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-2') 2
    .choix
      input#stepper-axehpc-3(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-3') 3
    .choix 
      input#stepper-axehpc-4(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-4') 4
    .choix
      input#stepper-axehpc-5(type='radio', name='stepper-axehpc')
      label(for='stepper-axehpc-5') 5+
  .help-block
    p#error-stepper-axehpc Veuillez sélectionner une valeur