HTML
            


            
PUG
            
//- Composant RadioStepperGroup

  Le Composant `RadioStepperGroup` est un composant de sélection permettant à l’utilisateur de choisir une valeur parmi une série numériques affichées horizontalement.

  {@link https://www.figma.com/design/eMXYZgCoXTAbLfB5tbUbUi/RadioStepperGroup Documentation Figma}
  {@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=0123-456789 Composant Figma}
  {@link https://maquettes.tools.df.maif.io/katya/forms.html#radio-stepper-group Composant Katya}
  {@link https://maquettes.tools.df.maif.io/lib-react-ui/Components/RadioStepper/RadioStepperGroup 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 RadioStepperGroup
  .field-item.-radio-stepper-group
    .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 RadioStepperGroup avec une valeur sélectionnée
  .field-item.-radio-stepper-group
    .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 RadioStepperGroup avec une sévérité d'erreur
  .field-item.-radio-stepper-group
    .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 RadioStepperGroup avec une sévérité d'avertissement
  .field-item.-radio-stepper-group
    .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