Options

Checkbox Options

Option 1 Option 2

<fieldset>
  <label class="option" for="option-1">
    <input id="option-1" name="option['1']" type="checkbox" value="option-1" />
    <span class="option__base">
      <svg aria-hidden="true" class="option__graphic">
        <use xlink:href="#option-nyco-checkbox"></use>
      </svg>
      <span class="option__label">Option 1</span>
    </span>
  </label>&nbsp;<label class="option" for="option-2">
    <input id="option-2" name="option['2']" type="checkbox" value="option-2" />
    <span class="option__base">
      <svg aria-hidden="true" class="option__graphic">
        <use xlink:href="#option-nyco-checkbox"></use>
      </svg>
      <span class="option__label">Option 2</span>
    </span>
  </label>
</fieldset>

A styled checkbox option group. Radio options are additive, allowing multiple selections in a group of options. Color styling is determined by the Color Combination utility it is nested under. Note the <fieldset> and <legend> used for making the checkbox group understandable for all users. Read more about form grouping in W3’s Web Accessibility Tutorials. The graphics for the checkbox input are included in the icon sprite that needs to be inlined in the DOM to appear.

Radio Options

Option A Option B

<fieldset>
  <label class="option" for="option-a">
    <input id="option-a" name="option['radio']" type="radio" value="option-a" />
    <span class="option__base">
      <svg aria-hidden="true" class="option__graphic">
        <use xlink:href="#option-nyco-radio"></use>
      </svg>
      <span class="option__label">Option A</span>
    </span>
  </label>&nbsp;<label class="option" for="option-b">
    <input id="option-b" name="option['radio']" type="radio" value="option-b" />
    <span class="option__base">
      <svg aria-hidden="true" class="option__graphic">
        <use xlink:href="#option-nyco-radio"></use>
      </svg>
      <span class="option__label">Option B</span>
    </span>
  </label>
</fieldset>

A styled radio option group. Radio options are binary, only allowing one selection in a group of options. Color styling is determined by the Color Combination utility it is nested under. Note the <fieldset> and <legend> used for making the radio group more understandable for all users. Read more about form grouping in W3’s Web Accessibility Tutorials. The graphics for the radio input are included in the icon sprite that needs to be inlined in the DOM to appear.