<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-1" class="sb-checkbox-without-label__input">
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-1">Checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-2" class="sb-checkbox-without-label__input" checked>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-2">Checked checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-3" class="sb-checkbox-without-label__input" disabled>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-3">Disabled checkbox.<label>
</div>
<div class="sb-flex-inline sb-align-items-center sb-margin-left-s">
  <div class="sb-checkbox-without-label">
    <input type="checkbox" id="label-cb-4" class="sb-checkbox-without-label__input" disabled checked>
    <div class="sb-checkbox-without-label__checkmark-container">
      <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
        <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
  <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-4">Disabled checked checkbox.<label>
</div>
<div class="sb-grid sb-margin-top">
  <div class="sb-tile sb-col-2 sb-padding-s">
    <div class="sb-checkbox-without-label">
      <input type="checkbox" id="label-cb-5" class="sb-checkbox-without-label__input" checked>
      <div class="sb-checkbox-without-label__checkmark-container">
        <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
          <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="sb-tile sb-col-4 sb-padding-s">
    <label class="sb-label sb-label--for-checkbox sb-margin-left-xs" for="label-cb-5">Label in another container<label>
  </div>
</div>