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.

Legend 
<fieldset>
  <legend>Legend</legend>
  <div class="flex flex-wrap gcl">
    <label class="form__check"><input type="checkbox" />Option 1</label>
    <label class="form__check"><input type="checkbox" />Option 2</label>
    <label class="form__check"><input type="checkbox" disabled/>Option 3</label>
  </div>
</fieldset>

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>