Corncob

Corncob Design Language

Corncob is a framework-neutral design language built with tokens, CSS, and plain JavaScript behavior.

Toggles

Toggles allow users to select one option from a set of mutually exclusive options. Corncob toggles are styled native radio buttons.

Extra Small

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--xs" aria-labelledby="legend1">
    <legend id="legend1">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example1" name="example-xs" value="one" checked />
        <label for="example1">One</label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example2" name="example-xs" value="two" />
        <label for="example2">Two</label>
      </div>
    </div>
  </fieldset>

Small

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--sm" aria-labelledby="legend2">
    <legend id="legend2">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example3" name="example-sm" value="one" checked />
        <label for="example3">One</label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example4" name="example-sm" value="two" />
        <label for="example4">Two</label>
      </div>
    </div>
  </fieldset>

Medium

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--md" aria-labelledby="legend3">
    <legend id="legend3">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example5" name="example-md" value="one" checked />
        <label for="example5">One</label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example6" name="example-md" value="two" />
        <label for="example6">Two</label>
      </div>
    </div>
  </fieldset>

Large

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--lg" aria-labelledby="legend4">
    <legend id="legend4">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example7" name="example-lg" value="one" checked />
        <label for="example7">One</label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example8" name="example-lg" value="two" />
        <label for="example8">Two</label>
      </div>
    </div>
  </fieldset>

Extra Large

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--xl" aria-labelledby="legend5">
    <legend id="legend5">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example9" name="example-xl" value="one" checked />
        <label for="example9">One</label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example10" name="example-xl" value="two" />
        <label for="example10">Two</label>
      </div>
    </div>
  </fieldset>

Disabled

Group Label
 
<fieldset class="corn-form--item corn-toggle-group corn-toggle--sm" aria-labelledby="legend2-disabled">
<legend id="legend2-disabled">Group Label</legend>
<div class="corn-toggles">
  <div class="corn-toggle">
    <input type="radio" id="example3-disabled" name="example-sm-disabled" value="one" checked disabled/>
    <label for="example3-disabled">One</label>
  </div>
  <div class="corn-toggle">
    <input type="radio" id="example4-disabled" name="example-sm-disabled" value="two" disabled/>
    <label for="example4-disabled">Two</label>
  </div>
</div>
</fieldset>

Icon Toggles

Icon toggles are a variation of the default toggle that uses icons instead of text labels. They are available in all sizes and can be used in the same way as the default toggles.

Extra Small Icons

Group Label
 
<fieldset class="corn-form--item corn-toggle-group corn-toggle--xs" aria-labelledby="legend1">
  <legend id="legend1">Group Label</legend>
  <div class="corn-toggles">
    <div class="corn-toggle">
      <input type="radio" id="example1-icon" name="example-xs-icon" value="lock" checked />
      <label for="example1-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Lock">
          <use href=[icon]></use>
        </svg>
      </label>
    </div>
    <div class="corn-toggle">
      <input type="radio" id="example2-icon" name="example-xs-icon" value="unlock" />
      <label for="example2-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Unlock">
          <use href=[icon]></use>
        </svg>
      </label>
    </div>
  </div>
</fieldset>

Small Icons

Group Label
 
<fieldset class="corn-form--item corn-toggle-group corn-toggle--sm" aria-labelledby="legend2">
  <legend id="legend2">Group Label</legend>
  <div class="corn-toggles">
    <div class="corn-toggle">
      <input type="radio" id="example1-sm-icon" name="example-sm-icon" value="lock" checked />
      <label for="example1-sm-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Lock">
          <use href="[icon]"></use>
        </svg>
      </label>
    </div>
    <div class="corn-toggle">
      <input type="radio" id="example2-sm-icon" name="example-sm-icon" value="unlock" />
      <label for="example2-sm-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Unlock">
          <use href="[icon]"></use>
        </svg>
      </label>
    </div>
  </div>
</fieldset>

Medium Icons

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--md" aria-labelledby="legend3">
    <legend id="legend3">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example5-icon" name="example-md-icon" value="smile" checked />
        <label for="example5-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Smile">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example6-icon" name="example-md-icon" value="neutral" />
        <label for="example6-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Neutral">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example7-icon" name="example-md-icon" value="frown" />
        <label for="example7-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Frown">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
    </div>
  </fieldset>

Large Icons

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--lg" aria-labelledby="legend4">
    <legend id="legend4">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example8-icon" name="example-lg-icon" value="lock" />
        <label for="example8-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Lock">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example9-icon" name="example-lg-icon" value="unlock" checked />
        <label for="example9-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Unlock">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
    </div>
  </fieldset>

Extra Large Icons

Group Label
 
  <fieldset class="corn-form--item corn-toggle-group corn-toggle--xl" aria-labelledby="legend5">
    <legend id="legend5">Group Label</legend>
    <div class="corn-toggles">
      <div class="corn-toggle">
        <input type="radio" id="example10-icon" name="example-xl-icon" value="lock" />
        <label for="example10-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Lock">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
      <div class="corn-toggle">
        <input type="radio" id="example11-icon" name="example-xl-icon" value="unlock" checked />
        <label for="example11-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Unlock">
            <use href="[icon]"></use>
          </svg>
        </label>
      </div>
    </div>
  </fieldset>

Disabled

Group Label
Group Label
 
<fieldset class="corn-form--item corn-toggle-group corn-toggle--sm" aria-labelledby="legend2-disabled">
  <legend id="legend2-disabled">Group Label</legend>
  <div class="corn-toggles">
    <div class="corn-toggle">
      <input type="radio" id="example3-disabled" name="example-sm-disabled" value="one" checked disabled/>
      <label for="example3-disabled">One</label>
    </div>
    <div class="corn-toggle">
      <input type="radio" id="example4-disabled" name="example-sm-disabled" value="two" disabled/>
      <label for="example4-disabled">Two</label>
    </div>
  </div>
</fieldset>

<hr />

<fieldset class="corn-form--item corn-toggle-group corn-toggle--md" aria-labelledby="legend3-disabled">
  <legend id="legend3-disabled">Group Label</legend>
  <div class="corn-toggles">
    <div class="corn-toggle">
      <input type="radio" id="example5-icon-disabled" name="example-md-icon" value="smile" checked disabled/>
      <label for="example5-icon-disabled">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Smile">
          <use href="[icon]"></use>
        </svg>
      </label>
    </div>
    <div class="corn-toggle">
      <input type="radio" id="example6-icon-disabled" name="example-md-icon" value="neutral" disabled/>
      <label for="example6-icon-disabled">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Neutral">
          <use href="[icon]"></use>
        </svg>
      </label>
    </div>
    <div class="corn-toggle">
      <input type="radio" id="example7-icon-disabled" name="example-md-icon" value="frown" disabled/>
      <label for="example7-icon-disabled">
        <svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-label="Frown">
          <use href="[icon]"></use>
        </svg>
      </label>
    </div>
  </div>
</fieldset>

Accessibility Notes

Fieldsets and Legends are used to group related toggles together. In order to maintain accessibility, fieldsets should have a legend that describes the group of toggles. Corn-cob uses display: contents on the legend in order to allow the legend to behave like a regular element while still providing a label for the group. However this may (or may not) have implications for screen readers and other assistive technologies. So we recommend using aria-labelledby on the fieldset with a corresponding id on the legend.

When using icon toggles, it’s important to provide an aria-label on the .corn-icon element to ensure that screen readers can understand the purpose of the toggle.

Toggle Tokens

 
:root {
  --cc-toggle--height--xs: var(--cc-form--item--size--xs);
  --cc-toggle--height--sm: var(--cc-form--item--size--sm);
  --cc-toggle--height--md: var(--cc-form--item--size--md);
  --cc-toggle--height--lg: var(--cc-form--item--size--lg);
  --cc-toggle--height--xl: var(--cc-form--item--size--xl);
  --cc-toggle--font-size--md: var(--cc-form--item--font-size--md);
  --cc-toggle--font-size--xs: var(--cc-form--item--font-size--xs);
  --cc-toggle--font-size--sm: var(--cc-form--item--font-size--sm);
  --cc-toggle--font-size--lg: var(--cc-form--item--font-size--lg);
  --cc-toggle--font-size--xl: var(--cc-form--item--font-size--xl);
  --cc-toggle--background: var(--cc-form--item--background);
  --cc-toggle--background--hover: var(--cc-form--item--background--hover);
  --cc-toggle--background--checked: var(--cc-form--widget--color);
  --cc-toggle--background--checked--hover: var(--cc-form--widget--color--hover);
  --cc-toggle--border: var(--cc-border--width) var(--cc-border--style) transparent;
  --cc-toggle--border-color--hover: var(--cc-border--color);
  --cc-toggle--border-color--checked: var(--cc-border--color);
  --cc-toggle--border-color--focus: var(--cc-form--item--border--color--focus);
  --cc-toggle--border-radius: var(--cc-border--radius);
  --cc-toggle--color--checked: var(--cc-white);
  --cc-toggle--focus-ring: var(--cc-form--item--focus-ring);
  --cc-toggle--widget--outline: inset 0 0 0 2px var(--cc-gray-20);
}