<ul className="bc-setting-list">
    <li className="bc-setting-list__item">
      <BcSwitchInput
        label={<>Activity on <strong>subscribed</strong> submissions</>}
        id='setting-list-switch-block-eg1'
        name="switch"
        isReverse
        justify
        defaultChecked
      />
    </li>
    <li className="bc-setting-list__item">
      <BcSwitchInput
        label={<>Team members <strong>@mention</strong> me</>}
        id='setting-list-switch-block-eg2'
        name='switch'
        isReverse
        justify
      />
    </li>
    <li className="bc-setting-list__item">
      <BcSwitchInput
        label={<>I’m <strong>assigned</strong> to a submission</>}
        id='setting-list-switch-block-eg3'
        name='switch'
        isReverse
        justify
      />
    </li>
    <li className="bc-setting-list__item">
      <label className="bc-setting-list__control-input-label" htmlFor="checkbox-spiders">
        <div className="bc-setting-list__item-text">
          <BcLabel htmlFor='checkbox-spiders'>
            Receive sporadic <strong>spiders</strong>
          </BcLabel>
        </div>
        <div className="bc-setting-list__item-controls bc-control-input--unlabelled">
          <BcControlInput id="checkbox-spiders" name="checkbox-spiders" value='Yes' />
        </div>
      </label>
    </li>
    <li aria-describedby="setting__team-or-researcher-notification-types-react" className="bc-setting-list__item" role="group">
      <div className="bc-setting-list__item-text" id="setting__team-or-researcher-notification-types-react">
        <BcLabel htmlFor='checkbox'>
          Someone writes a <strong>team note</strong> or a researcher <strong>replies</strong>
        </BcLabel>
      </div>
      <div className="bc-setting-list__item-controls">
        <BcControlInput id="setting__team-or-researcher-notification-types-web" name='checkbox-web' value='Web' label='Web' />
        <BcControlInput defaultChecked id="setting__team-or-researcher-notification-types-email" name='checkbox-email' value='Email' label='Email' />
      </div>
    </li>
    <li aria-describedby="setting__ponies-react" className="bc-setting-list__item" role="group">
      <div className="bc-setting-list__item-text" id="setting__ponies-react">
        <BcLabel htmlFor='setting__ponies-react'>
          Receive sporadic <strong>ponies</strong>
        </BcLabel>
      </div>
      <div className="bc-setting-list__item-controls">
        <BcControlInput defaultChecked type="radio" id="setting__ponies-react-on" name='sporadic-ponies__on' value='On' label='On' />
        <BcControlInput type="radio" id="setting__ponies-react-off" name='sporadic-ponies__off' value='Off' label='Off' />
      </div>
    </li>
  </ul>