GoComponents

# Yes No

The Yes No component allows users to choose an option from a collection of radio buttons.

# Default

The below example is a default implementation of the Yes No component.

As can be seen from the HTML, it's worth noting the radio styling is applied to the label element for each radio. Radio input elements are retained for semantics and role attributes can be added to the HTML but these are optional.

  <div class="goco-c-yes-no" role="radiogroup">
    <div class="goco-c-yes-no__button" role="radio">
      <input name="YesNo" id="Yes" type="radio" class="goco-c-yes-no__radio">
      <label for="Yes" class="goco-c-yes-no__label">
        <span class="goco-c-yes-no__text">Yes</span>
      </label>
    </div>
    <div class="goco-c-yes-no__button" role="radio">
      <input name="YesNo" id="No" type="radio" class="goco-c-yes-no__radio">
      <label for="No" class="goco-c-yes-no__label">
        <span class="goco-c-yes-no__text">No</span>
      </label>
    </div>
  </div>

NOTE

There are no constraints on the text used on each button label, but the styling does not accomodate longer words and is always circular shaped.

# Sizes

There is an additional size of the yesno available, small.

# Small

<div class="goco-c-yes-no goco-c-yes-no--small" role="radiogroup">
  <div class="goco-c-yes-no__button" role="radio">
    <input name="YesNo" id="yes-small" type="radio" class="goco-c-yes-no__radio">
    <label for="yes-small" class="goco-c-yes-no__label">
      <span class="goco-c-yes-no__text">Yes</span>
    </label>
  </div>
  <div class="goco-c-yes-no__button" role="radio">
    <input name="YesNo" id="no-small" type="radio" class="goco-c-yes-no__radio">
    <label for="no-small" class="goco-c-yes-no__label">
      <span class="goco-c-yes-no__text">No</span>
    </label>
  </div>
</div>

# Dark

<div class="goco-c-yes-no goco-c-yes-no--dark" role="radiogroup">
  <div class="goco-c-yes-no__button" role="radio">
    <input name="YesNo" id="yes-dark" type="radio" class="goco-c-yes-no__radio">
    <label for="yes-dark" class="goco-c-yes-no__label">
      <span class="goco-c-yes-no__text">Yes</span>
    </label>
  </div>
  <div class="goco-c-yes-no__button" role="radio">
    <input name="YesNo" id="no-dark" type="radio" class="goco-c-yes-no__radio">
    <label for="no-dark" class="goco-c-yes-no__label">
      <span class="goco-c-yes-no__text">No</span>
    </label>
  </div>
</div>

← Fieldset →