Component

A checkbox control should be used when a user has to make 0–n number of choices given many options. A checkbox is similar to a switch, however a checkbox should be used when a form requires additional actions from a user in order for their selections to take effect or if a group of options can be in an indeterminate state.

iconsCheckbox Group

Favorite programming languages 
<fieldset class="ray-fieldset">
  <legend class="ray-fieldset__legend">Favorite programming languages</legend>
  <div class="ray-checkbox">
    <input
      id="checkbox-1"
      name="checkbox-button-story"
      type="checkbox"
      class="ray-checkbox__input"
    />
    <label class="ray-checkbox__label" for="checkbox-1">JavaScript</label>
  </div>

  <div class="ray-checkbox">
    <input
      id="checkbox-2"
      name="checkbox-button-story"
      type="checkbox"
      class="ray-checkbox__input"
    />
    <label class="ray-checkbox__label" for="checkbox-2">
      Ruby
    </label>
  </div>

  <div class="ray-checkbox">
    <input
      id="checkbox-3"
      name="checkbox-button-story"
      type="checkbox"
      class="ray-checkbox__input"
    />
    <label class="ray-checkbox__label" for="checkbox-3">
      GoLang
    </label>
  </div>
</fieldset>

iconsCheckbox Group (RTL)

אוכל מועדף 
<div dir="rtl">
  <fieldset class="ray-fieldset">
    <legend class="ray-fieldset__legend">אוכל מועדף</legend>
    <div class="ray-checkbox">
      <input
        id="checkbox-a"
        name="checkbox-button-story"
        type="checkbox"
        class="ray-checkbox__input"
      />
      <label class="ray-checkbox__label" for="checkbox-a">פיצה</label>
    </div>

    <div class="ray-checkbox">
      <input
        id="checkbox-b"
        name="checkbox-button-story"
        type="checkbox"
        class="ray-checkbox__input"
      />
      <label class="ray-checkbox__label" for="checkbox-b">פלאפל</label>
    </div>

    <div class="ray-checkbox">
      <input
        id="checkbox-c"
        name="checkbox-button-story"
        type="checkbox"
        class="ray-checkbox__input"
      />
      <label class="ray-checkbox__label" for="checkbox-c">סלט</label>
    </div>
  </fieldset>
</div>