Skip to main content
MybringDesign System

Checkbox and radio

Single and multiple choice

Additional reading

Checkbox

Use checkboxes when multiple choices can be made. Wrap the input with a label element. Checkboxes with multiple levels or a “select all” function can utilise the indeterminate state.

Legend
Indeterminate 
<form class="mb-form owll">
  <fieldset>
    <legend>Legend</legend>
    <div class="flex flex-wrap gcl grs">
      <label class="form__check"><input type="checkbox" name="option" value="1" />Option 1</label>
      <label class="form__check"><input type="checkbox" name="option" value="2" />Option 2</label>
      <label class="form__check"><input type="checkbox" name="option" value="3" disabled/>Option 3</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Indeterminate</legend>
    <label class="form__check"><input type="checkbox" name="indeterminate" value="all" />All</label>
    <div class="flex flex-wrap gcl grs plm">
      <label class="form__check"><input type="checkbox" name="indeterminate" value="first" />Option 1</label>
      <label class="form__check"><input type="checkbox" name="indeterminate" value="second" />Option 2</label>
    </div>
  </fieldset>
</form>

Radio input

Use radio inputs when a single choice can be made. Remove options instead of disabling them.

Wrap the input with a label element.

Tracking type 
<fieldset>
  <legend>Tracking type</legend>
  <div class="flex flex-wrap gcl">
    <label class="form__radio"><input type="radio" name="radios" />RFID tracking</label>
    <label class="form__radio"><input type="radio" name="radios" checked />Barcode tracking</label>
    <label class="form__radio"><input type="radio" name="radios" />Without tracking</label>
  </div>
</fieldset>