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.

While using input type="number" users could accidentally increase or decrease the number using the scroll wheel on the mouse or the scroll gesture on their trackpad. This feature can be useful when collecting countable data but bad if entering data such as passport numbers. We have switched to input type="text" inputmode="numeric" pattern="[0-9]*" because it allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

Designed for inclusion

  • Our chunky buttons are at least 48px high to ensure a nice easy tap target
  • The <fieldset> tag is used when grouping radio buttons, which provides context for screen reader users

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--[1,3,4,5]-col
View demo Open in new window
Open in new window
320 x 568
View code 
    <form>
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--1-col">
    <legend class="gg-c-chunky-buttons__legend">1 column</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="1-col-0">
          <span class="gg-c-chunky-buttons__text">
            1
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="1-col-1">
          <span class="gg-c-chunky-buttons__text">
            2
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-2" class="gg-c-chunky-buttons__radio" value="200000">
        <label class="gg-c-chunky-buttons__button" for="1-col-2">
          <span class="gg-c-chunky-buttons__text">
            3
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-3" class="gg-c-chunky-buttons__radio" value="300000">
        <label class="gg-c-chunky-buttons__button" for="1-col-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">
    <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
Open in new window
320 x 568
View code 
    <form>
  <fieldset class="gg-c-chunky-buttons gg-c-chunky-buttons--fit-content gg-c-chunky-buttons--1-col">
    <legend class="gg-c-chunky-buttons__legend">1 column</legend>
    <ol class="gg-c-chunky-buttons__list">
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-0" class="gg-c-chunky-buttons__radio" value="75000" checked="">
        <label class="gg-c-chunky-buttons__button" for="1-col-0">
          <span class="gg-c-chunky-buttons__text">
            £10
          </span>
        </label>
      </li>
      <li class="gg-c-chunky-buttons__option">
        <input name="1-col" type="radio" id="1-col-1" class="gg-c-chunky-buttons__radio" value="100000">
        <label class="gg-c-chunky-buttons__button" for="1-col-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">
    <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.

Please note that the single column variant is not available for no-gap.

View demo Open in new window
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
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
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
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>