Chunky buttons

Radio buttons in disguise


Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

How they look

Standard chunky buttons

  • Defaults to two columns
  • Number of columns can be set by using the col modifiers gg-c-chunky-buttons--[3,4,5]-col
  • Does not have a single column option. You can use the select list if you need this
View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-chunky-buttons">
    <legend class="gg-c-chunky-buttons__legend">Default (2) columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="default-0">
          <span class="gg-c-chunky-buttons__text">
            1
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="default-1">
          <span class="gg-c-chunky-buttons__text">
            2
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-2" class="gg-c-chunky-buttons__radio" value="200000">
        <label class="gg-c-chunky-buttons__button" for="default-2">
          <span class="gg-c-chunky-buttons__text">
            3
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-3" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="default-3">
          <span class="gg-c-chunky-buttons__text">
            4
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--3-col">
    <legend class="gg-c-chunky-buttons__legend">3 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="3-column-0">
            <span class="gg-c-chunky-buttons__text">
              1
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="3-column-1">
            <span class="gg-c-chunky-buttons__text">
              2
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="3-column-2">
            <span class="gg-c-chunky-buttons__text">
              3
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-3" class="gg-c-chunky-buttons__radio" value="300000">
          <label class="gg-c-chunky-buttons__button" for="3-column-3">
            <span class="gg-c-chunky-buttons__text">
              4
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--4-col">
    <legend class="gg-c-chunky-buttons__legend">4 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="4-column-0">
            <span class="gg-c-chunky-buttons__text">
              1
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="4-column-1">
            <span class="gg-c-chunky-buttons__text">
              2
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="4-column-2">
            <span class="gg-c-chunky-buttons__text">
              3
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-3" class="gg-c-chunky-buttons__radio" value="300000">
          <label class="gg-c-chunky-buttons__button" for="4-column-3">
            <span class="gg-c-chunky-buttons__text">
              4
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--5-col">
    <legend class="gg-c-chunky-buttons__legend">5 columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="5-column-0">
          <span class="gg-c-chunky-buttons__text">
            1
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="5-column-1">
          <span class="gg-c-chunky-buttons__text">
            2
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-2" class="gg-c-chunky-buttons__radio" value="200000">
        <label class="gg-c-chunky-buttons__button" for="5-column-2">
          <span class="gg-c-chunky-buttons__text">
            3
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-3" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-3">
          <span class="gg-c-chunky-buttons__text">
            4
          </span>
        </label>
      </li>
            <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-4" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-4">
          <span class="gg-c-chunky-buttons__text">
            5
          </span>
        </label>
      </li>
            <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-5" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-5">
          <span class="gg-c-chunky-buttons__text">
            6
          </span>
        </label>
      </li>
            <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-6" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-6">
          <span class="gg-c-chunky-buttons__text">
            7
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
</form>

Chunky buttons fitting their content

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--fit-content">
    <legend class="gg-c-chunky-buttons__legend">Default (2) columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="default-0">
          <span class="gg-c-chunky-buttons__text">
            £10
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="default-1">
          <span class="gg-c-chunky-buttons__text">
            £20
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--fit-content gg-c-chunky-buttons--3-col">
    <legend class="gg-c-chunky-buttons__legend">3 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="3-column-0">
            <span class="gg-c-chunky-buttons__text">
              £10
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="3-column-1">
            <span class="gg-c-chunky-buttons__text">
              £20
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="3-column-2">
            <span class="gg-c-chunky-buttons__text">
              £25
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--fit-content gg-c-chunky-buttons--4-col">
    <legend class="gg-c-chunky-buttons__legend">4 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="4-column-0">
            <span class="gg-c-chunky-buttons__text">
              £10
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="4-column-1">
            <span class="gg-c-chunky-buttons__text">
              £15
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="4-column-2">
            <span class="gg-c-chunky-buttons__text">
              £20
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-3" class="gg-c-chunky-buttons__radio" value="300000">
          <label class="gg-c-chunky-buttons__button" for="4-column-3">
            <span class="gg-c-chunky-buttons__text">
              £25
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--fit-content gg-c-chunky-buttons--5-col">
    <legend class="gg-c-chunky-buttons__legend">5 columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="5-column-0">
          <span class="gg-c-chunky-buttons__text">
            £10
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="5-column-1">
          <span class="gg-c-chunky-buttons__text">
            £15
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-2" class="gg-c-chunky-buttons__radio" value="200000">
        <label class="gg-c-chunky-buttons__button" for="5-column-2">
          <span class="gg-c-chunky-buttons__text">
            £20
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-3" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-3">
          <span class="gg-c-chunky-buttons__text">
            £25
          </span>
        </label>
      </li>
            <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-4" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-4">
          <span class="gg-c-chunky-buttons__text">
            £30
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
</form>

Chunky buttons with no gap

These buttons should only ever be a single row - they should never wrap onto two lines.

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--no-gap">
    <legend class="gg-c-chunky-buttons__legend">Default (2) columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-0" class="gg-c-chunky-buttons__radio" value="75000">
        <label class="gg-c-chunky-buttons__button" for="default-0">
          <span class="gg-c-chunky-buttons__text">
            Yes, please
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="default" type="radio" id="default-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="default-1">
          <span class="gg-c-chunky-buttons__text">
            No, thanks
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--no-gap gg-c-chunky-buttons--3-col">
    <legend class="gg-c-chunky-buttons__legend">3 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="3-column-0">
            <span class="gg-c-chunky-buttons__text">
              1
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="3-column-1">
            <span class="gg-c-chunky-buttons__text">
              2
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="3-column" type="radio" id="3-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="3-column-2">
            <span class="gg-c-chunky-buttons__text">
              3
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--no-gap gg-c-chunky-buttons--4-col">
    <legend class="gg-c-chunky-buttons__legend">4 columns</legend>
      <ol class="gg-c-chunky-buttons__list">
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
          <label class="gg-c-chunky-buttons__button" for="4-column-0">
            <span class="gg-c-chunky-buttons__text">
              1
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-1" class="gg-c-chunky-buttons__radio" value="100000">
          <label class="gg-c-chunky-buttons__button" for="4-column-1">
            <span class="gg-c-chunky-buttons__text">
              2
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-2" class="gg-c-chunky-buttons__radio" value="200000">
          <label class="gg-c-chunky-buttons__button" for="4-column-2">
            <span class="gg-c-chunky-buttons__text">
              3
            </span>
          </label>
        </li>
        <li class="gg-c-chunky-buttons__option">
          <input name="4-column" type="radio" id="4-column-3" class="gg-c-chunky-buttons__radio" value="300000">
          <label class="gg-c-chunky-buttons__button" for="4-column-3">
            <span class="gg-c-chunky-buttons__text">
              4
            </span>
          </label>
        </li>
      </ol>
  </fieldset>
  <br> <!-- br is a hack for display purposes - don't do this -->
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--no-gap gg-c-chunky-buttons--5-col">
    <legend class="gg-c-chunky-buttons__legend">5 columns</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="5-column-0">
          <span class="gg-c-chunky-buttons__text">
            1
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="5-column-1">
          <span class="gg-c-chunky-buttons__text">
            2
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-2" class="gg-c-chunky-buttons__radio" value="200000">
        <label class="gg-c-chunky-buttons__button" for="5-column-2">
          <span class="gg-c-chunky-buttons__text">
            3
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-3" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-3">
          <span class="gg-c-chunky-buttons__text">
            4
          </span>
        </label>
      </li>
            <li class="gg-c-chunky-buttons__option">
        <input name="5-column" type="radio" id="5-column-4" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="5-column-4">
          <span class="gg-c-chunky-buttons__text">
            5
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
</form>

Chunky buttons with icons

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-chunky-buttons">
    <legend class="gg-c-chunky-buttons__legend">Chunky buttons with icons</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-0" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-0">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 1
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-1" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 2
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-2" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-2">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 3
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-3" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-3">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 4
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-4" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-4">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 5
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option gg-c-chunky-buttons__option--icon">
        <input name="reason" type="radio" id="reason-5" class="gg-c-chunky-buttons__radio" value="">
        <label class="gg-c-chunky-buttons__button" for="reason-5">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gg-c-chunky-buttons__icon">
            <path d="M18.29,13c.76-.62,5.82-3.08,3.12-4.39h0a.66.66,0,0,0-.3-.08L17,8.48c-1.87,0-1.44.37-2.13-1.06C14,5.7,14,3.37,12.47,2.15a.65.65,0,0,0-.76-.1c-1.18.85-1.39,2.24-1.87,3.59-1,2.75-.07,2.82-2.49,2.84-1.25,0-5.62-.91-5.46,1.38.08,1.18,3,2.7,3.62,3.22,1.65,1.42,1.52,1.23.81,3.2-.4,1.08-2.63,5.17-.15,5.38.93.08,2.14-1.38,2.73-1.87,2-1.65,2.69-2.78,5-1,1,.79,3.52,4,5,2.45.73-.77-.26-2.4-.5-3.12s-.49-1.58-.78-2.36C16.88,14,16.92,14.11,18.29,13Zm-2.66,1.14a39.46,39.46,0,0,0,1.31,3.79c0,.15.09.26.13.39a1.38,1.38,0,0,0,.23.26.47.47,0,0,1,.16.33h0c.47.44-.24,1.15-.71.7a5.93,5.93,0,0,1-.43-.44L16,19c-.93-.75-2.64-2.7-3.94-2.77C11,16.12,9.74,17.51,9,18.13s-2,2.1-2.38,1.29c-.32-.61,1.47-4.16,1.76-4.79a.67.67,0,0,0-.1-.76c-.88-.85-2.62-1.81-3.53-2.81h0a1.5,1.5,0,0,1-.63-.41A.55.55,0,0,1,4,10.41c-.31-.35-.05-1,.46-.83.09,0,.19.06.28.09l.12,0c.38,0,.87.07,1.33.06a19.28,19.28,0,0,1,3,0A.65.65,0,0,0,10,9.34c.2-.53.63-2.54,1.2-3.87.13-.66.59-1.61,1.16-1.21l.09,0c.77.4,1.48,4.24,1.65,5a.61.61,0,0,0,.6.46c1.56-.1,3.14,0,4.72,0l.11,0a.53.53,0,0,1,.22,0l.06-.05c.5-.39,1.21.31.71.71a16.57,16.57,0,0,1-3.15,1.78c-.7.62-1.29,1.18-1.53,1.37A.62.62,0,0,0,15.63,14.13Z" />
          </svg>
          <span class="gg-c-chunky-buttons__text">
            Option 6
          </span>
        </label>
      </li>
    </ol>
  </fieldset>
</form>