Checkboxes Inline checkboxes Radios Inline radios

UI Atoms

Checkboxes and radios

1.1 Checkboxes


<label class="amui-a-form-check">
  <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1" checked>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Checked</span>
</label>

<label class="amui-a-form-check">
  <input type="checkbox" id="Checkbox2" name="Checkbox2" value="option2">
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Default</span>
</label>

<label class="amui-a-form-check">
  <input type="checkbox" id="Checkbox3" name="Checkbox3" value="option3" disabled>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Disabled</span>
</label>

1.2 Inline Checkboxes


<label class="amui-a-form-check is--inline">
  <input type="checkbox" id="inlineCheckbox1" name="inlineCheckbox1" value="option1" checked>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Checked</span>
</label>

<label class="amui-a-form-check is--inline">
  <input type="checkbox" id="inlineCheckbox2" name="inlineCheckbox2" value="option2">
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Default</span>
</label>

<label class="amui-a-form-check is--inline">
  <input type="checkbox" id="inlineCheckbox3" name="inlineCheckbox3" value="option3" disabled>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label">Disabled</span>
</label>

1.3 Radio

<label class="amui-a-form-check">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio checked</span>
</label>

<label class="amui-a-form-check">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio default</span>
</label>

<label class="amui-a-form-check">
  <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio disabled</span>
</label>

1.4 Inline Radio

<label class="amui-a-form-check is--inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadioOptions" value="option1" checked>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio checked</span>
</label>

<label class="amui-a-form-check is--inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadioOptions" value="option2">
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio default</span>
</label>

<label class="amui-a-form-check is--inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadioOptions" value="option3" disabled>
  <span class="amui-a-form-check__indicator"></span>
  <span class="amui-a-form-check__label"> Radio disabled</span>
</label>
← Buttons Form Input →