Chi Design System

Radio Buttons

In order to use a radio button just use an input type="radio" with the class a-input. Also, in order to have the checkbox properly styled, you must add an empty label for the checkbox immediately after it's declaration. More labels can be added next to it.

<input type="checkbox" class="a-input" name="example" id="radio01" checked>
<label for="radio01"></label>
<label class="c-text -ml1" for="radio01">Radio 1</label>

<input type="checkbox" class="a-input" name="example" id="radio02">
<label for="radio02"></label>
<label class="c-text -ml1" for="radio02">Radio 2</label>

<input type="checkbox" class="a-input" name="example" id="radio03">
<label for="radio03"></label>
<label class="c-text -ml1" for="radio03">Radio 3</label>