• Molecule
  • CORE COMPONENT
  • Taxonomic name: M-RADIO-PRICE-COMPARISON
  • Extension: FORMS-EXTENDED-A
  • Added on: v2023.01 (09/06/23)
  • Updated on: v2023.01 (09/06/23)

Price comparison

Price comparison allow the user to select from a product comparison list (two - three options), contains details list and modals, are collapsable and are preferable to a radio list because they contains more inforamtions for end user.

Design and usage

Structure

  • the component itself is contained in a "m-showhide" component
  • the component contains a "a-list-unordered" list component
  • the component contains an "a-radio" component

Placement

  • TBD

Labels

  • Default label for the a-radio button must initialized in the html
  • The default label must also be set as value for "data-label" attribute
  • Since the label change when a-radio button is checked, it must be set as value for "data-chosen-label" attribute
  • Text for highlighted card must be set as value for "data-highlight-label" attribute

Use case and exception scenarios

  • Minimum 2 formules / maximum ou 3 formules
  • CTA radio formule choisie / Choisir : texte centré dans la totalité du bouton
  • Mobile : formules repliées / CTA toujours visible / formule recommandée passe en 1er et est ouverte
  • Garanties : Au clic ouverture d'une modale

Examples

Standard

Interactive example

Code example

												<ul class="a-list-plain m-radio-price-comparison m-showhide m-showhide--print" data-module="m-showhide"
  data-accordion="true">
  <li class="m-radio-price-comparison__item t-accent-light t-accent-light--1" data-module="m-radio-price-comparison"
    data-chosen-label="Formule choisie" data-label="Choisir">

    <h2 class="m-radio-price-comparison__item__heading m-showhide__heading">
      <span>Tiers Mini</span>
      <span>14,55 € TTC/mois</span>
      <span>ou 174,60 € TTC/an</span>
    </h2>

    <div class="m-radio-price-comparison__item__content m-showhide__content">
      <ul class="a-list-unordered u-margin--y-none">
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-1">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-2">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-3">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--nope">
          <a data-module="o-modal" data-module-load="true" href="#modal-4">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--nope">
        <p class="u-margin--bottom-none">Lorem ipsum, dolor sit</p>
          <span>
            Lorem ipsum
          </span>
        </li>
      </ul>
    </div>

    <div class="m-radio-price-comparison__item__cta">
      <label class="a-radio" for="mpc1-1">
        <input class="a-radio__input" type="radio" name="mpc1" id="mpc1-1" value="mpc1-1">
        <span class="a-radio__label">
          <span class="a-radio__label-inner m-radio-price-comparison__item__cta__label">Choisir</span>
        </span>
        <span class="a-radio__ui"></span>
      </label>
    </div>
  </li>

  <li class="m-radio-price-comparison__item t-accent-light t-accent-light--1 m-radio-price-comparison__item--highlight"
    data-module="m-radio-price-comparison" data-chosen-label="Formule choisie" data-label="Choisir" data-highlight-label="Recommandée">
    <h2 class="m-radio-price-comparison__item__heading m-showhide__heading js-m-showhide-open">
      <span>Tiers Maxi</span>
      <span>17,80 € TTC/mois</span>
      <span>ou 216,60 € TTC/an</span>
    </h2>

    <div class="m-radio-price-comparison__item__content m-showhide__content">
      <ul class="a-list-unordered u-margin--y-none">
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-6">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-7">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-8">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-9">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--nope">
        <p class="u-margin--bottom-none">Lorem ipsum, dolor sit</p>
          <span>
            Lorem ipsum
          </span>
        </li>
      </ul>
    </div>

    <div class="m-radio-price-comparison__item__cta">
      <label class="a-radio" for="mpc1-2">
        <input class="a-radio__input" type="radio" name="mpc1" id="mpc1-2" value="mpc1-2" checked>
        <span class="a-radio__label">
          <span class="a-radio__label-inner m-radio-price-comparison__item__cta__label">Choisir</span>
        </span>
        <span class="a-radio__ui"></span>
      </label>
    </div>
  </li>

  <li class="m-radio-price-comparison__item t-accent-light t-accent-light--1" data-module="m-radio-price-comparison"
    data-chosen-label="Formule choisie" data-label="Choisir">
    <h2 class="m-radio-price-comparison__item__heading m-showhide__heading">
      <span>Tous risques</span>
      <span>22,55 € TTC/mois</span>
      <span>ou 271,60 € TTC/an</span>
    </h2>

    <div class="m-radio-price-comparison__item__content m-showhide__content">
      <ul class="a-list-unordered u-margin--y-none">
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-11">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-12">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-13">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-14">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-15">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
      </ul>
    </div>

    <div class="m-radio-price-comparison__item__cta">
      <label class="a-radio" for="mpc1-3">
        <input class="a-radio__input" type="radio" name="mpc1" id="mpc1-3" value="mpc1-3">
        <span class="a-radio__label">
          <span class="a-radio__label-inner m-radio-price-comparison__item__cta__label">Choisir</span>
        </span>
        <span class="a-radio__ui"></span>
      </label>
    </div>
  </li>
</ul>

<ul class="a-list-plain m-radio-price-comparison m-showhide m-showhide--print" data-module="m-showhide"
  data-accordion="true">
  <li class="m-radio-price-comparison__item t-accent-light t-accent-light--1" data-module="m-radio-price-comparison"
    data-chosen-label="Formule choisie" data-label="Choisir">
    <h2 class="m-radio-price-comparison__item__heading m-showhide__heading">
      <span>Tiers Mini</span>
      <span>14,55 € TTC/mois</span>
      <span>ou 174,60 € TTC/an</span>
    </h2>

    <div class="m-radio-price-comparison__item__content m-showhide__content">
      <ul class="a-list-unordered u-margin--y-none">
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-16">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-17">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-18">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--nope">
          <a data-module="o-modal" data-module-load="true" href="#modal-19">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--nope">
        <p class="u-margin--bottom-none">Lorem ipsum, dolor sit</p>
          <span>
            Lorem ipsum
          </span>
        </li>
      </ul>
    </div>

    <div class="m-radio-price-comparison__item__cta">
      <label class="a-radio" for="mpc2-1">
        <input class="a-radio__input" type="radio" name="mpc2" id="mpc2-1" value="mpc2-1">
        <span class="a-radio__label">
          <span class="a-radio__label-inner m-radio-price-comparison__item__cta__label">Choisir</span>
        </span>
        <span class="a-radio__ui"></span>
      </label>
    </div>
  </li>

  <li class="m-radio-price-comparison__item t-accent-light t-accent-light--1 m-radio-price-comparison__item--highlight"
    data-module="m-radio-price-comparison" data-chosen-label="Formule choisie" data-label="Choisir" data-highlight-label="Recommandée">
    <h2 class="m-radio-price-comparison__item__heading m-showhide__heading js-m-showhide-open">
      <span>Tiers Maxi</span>
      <span>17,80 € TTC/mois</span>
      <span>ou 216,60 € TTC/an</span>
    </h2>

    <div class="m-radio-price-comparison__item__content m-showhide__content">
      <ul class="a-list-unordered u-margin--y-none">
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-21">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-22">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-23">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-24">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
        <li class="a-list-unordered__item--tick">
          <a data-module="o-modal" data-module-load="true" href="#modal-25">Lorem ipsum, dolor sit</a>
          <span>
            Lorem ipsum
          </span>
        </li>
      </ul>
    </div>

    <div class="m-radio-price-comparison__item__cta">
      <label class="a-radio" for="mpc2-2">
        <input class="a-radio__input" type="radio" name="mpc2" id="mpc2-2" value="mpc2-2" checked>
        <span class="a-radio__label">
          <span class="a-radio__label-inner m-radio-price-comparison__item__cta__label">Choisir</span>
        </span>
        <span class="a-radio__ui"></span>
      </label>
    </div>
  </li>
</ul>

<!-- this should be at bottom of body -->
<div class="o-modal__content-container" id="modal-1">
  <h2 class="a-heading a-heading--1">
    Titre n°1
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-2">
  <h2 class="a-heading a-heading--1">
    Titre n°2
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-3">
  <h2 class="a-heading a-heading--1">
    Titre n°3
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-4">
  <h2 class="a-heading a-heading--1">
    Titre n°4
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-6">
  <h2 class="a-heading a-heading--1">
    Titre n°6
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-7">
  <h2 class="a-heading a-heading--1">
    Titre n°7
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-8">
  <h2 class="a-heading a-heading--1">
    Titre n°8
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-9">
  <h2 class="a-heading a-heading--1">
    Titre n°9
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-11">
  <h2 class="a-heading a-heading--1">
    Titre n°11
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-12">
  <h2 class="a-heading a-heading--1">
    Titre n°12
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-13">
  <h2 class="a-heading a-heading--1">
    Titre n°13
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-14">
  <h2 class="a-heading a-heading--1">
    Titre n°14
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-15">
  <h2 class="a-heading a-heading--1">
    Titre n°15
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-16">
  <h2 class="a-heading a-heading--1">
    Titre n°16
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-17">
  <h2 class="a-heading a-heading--1">
    Titre n°17
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-18">
  <h2 class="a-heading a-heading--1">
    Titre n°18
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-19">
  <h2 class="a-heading a-heading--1">
    Titre n°19
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-21">
  <h2 class="a-heading a-heading--1">
    Titre n°21
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-22">
  <h2 class="a-heading a-heading--1">
    Titre n°22
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-23">
  <h2 class="a-heading a-heading--1">
    Titre n°23
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-24">
  <h2 class="a-heading a-heading--1">
    Titre n°24
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>
<div class="o-modal__content-container" id="modal-25">
  <h2 class="a-heading a-heading--1">
    Titre n°25
  </h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptatem tenetur quibusdam culpa ipsum
    asperiores fugiat velit qui hic est architecto accusamus ab ex praesentium, accusantium omnis quos magni
    doloremque.
    Vitae aut cupiditate fugit voluptatum tenetur aliquid dolorem sint vel dicta porro quis, aperiam sit nihil culpa,
    atque rem, sapiente incidunt libero fugiat dolore expedita praesentium. Pariatur earum doloribus ipsa.
    Perspiciatis placeat optio sapiente nemo fugit debitis deserunt ullam? Vitae, praesentium nobis perferendis error
    fuga obcaecati commodi hic dolor dolorum numquam modi et quam provident voluptatum assumenda temporibus saepe
    perspiciatis.
  </p>
</div>

Development and test

Notes for developers

A radio input should NEVER be used on its own, instead use a checkbox in this situation.

Radios must be contained within their own fieldset and the legend is the question for the group of radios.

Within a group of radios the name attribute must be common between all the radios, but the id remains unique to the page.

Always have the radios within the group set to checked for the highlighted option (recommanded option).

Notes for testers

  • In this instance the label for the radio option is the wording directly on the right of the radio option. Clicking / pressing the explanitory text for the group of radio options will not transfer focus to any of the radio options like it would for a text input.
  • The label should be displayed to the right of the radio button and should activate the radio button when selected (as should the radio button itself).
  • It should be really clear which label applies to which radio button by using background shading to group the label and the radio button together.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.m-radio-price-comparison Base styling for price comparison group's container Yes ul  
.a-list-plain additional styling for group's container Yes .m-radio-price-comparison  
.m-radio-price-comparison__item Base styling for price comparison group's item Yes .m-radio-price-comparison > li  
.m-radio-price-comparison__item--highlight Modifier for recommanded item   .m-radio-price-comparison__item  
.m-radio-price-comparison__highlight style for recommanded section Yes .m-radio-price-comparison__item > div  
.m-radio-price-comparison__highlight__inner style for contained text in recommanded section Yes .m-radio-price-comparison__highlight > p text "Recommandée" must be itself in a <strong> tag
.m-radio-price-comparison__item__heading Style for price comparison item title Yes .m-radio-price-comparison__item > h2 Each of the three lines of the title must be in a <span> tag.
.m-radio-price-comparison__item__content Styles for price comparison item content list Yes .m-radio-price-comparison__item > div  
.m-radio-price-comparison__item__cta style for cta container Yes .m-radio-price-comparison__item > div  
.m-radio-price-comparison__item__cta__label modifier for radio input Yes .a-radio__label-inner  

Keyboard operations

TAB

Tabbing to an group of radio should make the radio option clearly visually different so that the focus point on the page is obvious to the user.

SPACE

With focus on the radio option, pressing SPACE will select/de-select the radio option.

CURSOR KEYS

With focus on the radio option, pressing any CURSOR KEY will move the focus to the next/previous option within the radio option group.

Component releases

  • Added on: v2023.01 (09/06/23)
  • Updated on: v2023.01 (09/06/23)

Latest update:

  • Feature: Add molecule feature.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team