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>

Chunky buttons with icons & radio circles

View demo Open in new window
320 x 568
View code
<form class="gg-u-readable-width">
  <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-1" class="gg-c-chunky-buttons__radio" value=""/>
        <label class="gg-c-chunky-buttons__button" for="reason-1">
        <svg class="gg-c-chunky-buttons__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.09 16.24a1.64 1.64 0 00-.57-1.24 1.51 1.51 0 00.48-1.1 1.64 1.64 0 00-.89-1.53 1.18 1.18 0 00.53-1 2.35 2.35 0 00-1.57-1.87 9.88 9.88 0 00-4.66-.32c.66-2 1.13-4.19-.76-5.9a2.45 2.45 0 00-1.87-.69 1.57 1.57 0 00-1.11.82 2.29 2.29 0 00-.1 1.69 5 5 0 01.1.82 3.44 3.44 0 01-2.54 3.33v-.61a.62.62 0 00-.29-.55.63.63 0 00-.42-.15H4.14a.71.71 0 00-.7.7V21a.72.72 0 00.7.71h3.25a.72.72 0 00.7-.71v-.3l.95.07c2.56.2 5.22.41 7.85.45a3.9 3.9 0 002.54-1.09 1.7 1.7 0 00.25-2.13 2 2 0 001.41-1.76zm-14.4 4h-2l-.1-11h2.08c-.05 3.66.07 7.38.02 11.03zm13.11-3.85c-.12.32-.52.59-1.17.78a.58.58 0 00-.37.29.63.63 0 00-.05.45s.16.27.24.4a.49.49 0 01.14.17.66.66 0 01.06.45.29.29 0 010 .14c-.16.47-1.24.84-1.76.86-2.62-.05-5.27-.25-7.84-.45l-.77-.06h-.17v-8.89H8.4A4.43 4.43 0 0011.46 8 5.48 5.48 0 0012 5.65c0-.14 0-.31-.06-.52-.06-.45-.15-1.13.07-1.3s.38 0 .57.08c2.13 1 1.17 3.67.54 5.43l-.14.38a.53.53 0 00.1.57.66.66 0 00.62.19.6.6 0 00.23 0 13.72 13.72 0 012.57-.1h.61a6.35 6.35 0 011.07.09h.13c.59 0 1.55.5.89 1.14a.26.26 0 01-.11.07h-.05l-.11.05-.5.11a.63.63 0 00-.29.65.6.6 0 00.47.49h.1a2.41 2.41 0 01.55 0 .41.41 0 01.3.05.67.67 0 01.19.14.49.49 0 01.12.47.46.46 0 01-.22.52c-.35.17-.78.15-1.12.32a.63.63 0 00-.15.45.6.6 0 00.6.58 1.17 1.17 0 01.88.35.4.4 0 01-.06.53z"/></svg>
          <span class="gg-c-chunky-buttons__text">
            Yes, please
          </span>
           <div class="gg-c-chunky-buttons__radio-circle"></div>
        </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 class="gg-c-chunky-buttons__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.88 9.48c0-1.33 0-4.71-.06-6a.64.64 0 00-1-.48h-.06a7.46 7.46 0 00-1.92 1.39c-.43.25-.53.41-1 .74-.09.06-.71.59-.79.66l-1.25.87c-.43.3-.87.59-1.32.86-.84-.08-1.71 0-2.56 0a.87.87 0 00-.36 0 .29.29 0 00-.1 0 .81.81 0 00-.21.1 1.08 1.08 0 00-.36.38 1.36 1.36 0 00-.1.21 1.57 1.57 0 000 .23.32.32 0 00.05.19.24.24 0 000 .08v6.75a.65.65 0 00.28.51.94.94 0 00.43.29 2.81 2.81 0 001 .05l1.93-.06c.94.9 1.37 1 2.29 1.95A31.51 31.51 0 0012 21.08a.65.65 0 001-.56c-.12-6.6-.17-6.52-.12-11.04zm-8.11 5.4H3.12V8.82h1.65zm6.64 4.19L9 17.23 7.56 16.1A3.87 3.87 0 016.39 15a7.89 7.89 0 000-1.07 6.68 6.68 0 000-1.48V9.71v-1c2-1.27 3.27-2.31 5.14-3.62v1.45c0 3.49-.14 7-.06 10.48a2.43 2.43 0 000 .34v.47l-.06 1.26zM22.36 8.6a.67.67 0 00-1.1-.41L18 11.26l-3-3a.64.64 0 00-1 .76.55.55 0 00.17.37L17 12.21l-2.88 2.73a.55.55 0 00-.11.71.66.66 0 001.09.41l2.94-2.78 2.71 2.78c.53.54 1.33-.18 1-.76a.63.63 0 00-.17-.36l-2.55-2.61 3.18-3a.55.55 0 00.15-.73z"/></svg>
          <span class="gg-c-chunky-buttons__text">
            No, thanks
          </span>
           <div class="gg-c-chunky-buttons__radio-circle"></div>
        </label>
      </li>
    </ol>
  </fieldset>
</form>

Chunky buttons with error state

If the field is required and has not been selected by the user.

View demo Open in new window
320 x 568
View code
<form>
  <fieldset class="gg-c-chunky-buttons gg-c-form__element--invalid">
    <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">
            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>
      <p class="gg-c-form__element-message gg-c-form__element-message--invalid">Please fill in this field</p>
  </fieldset>
</form>