Nothing much, just simple radio.
<label class="zust-radio">
<input type="radio" name="someName">
<span></span>
<span>Chocolate</span>
</label>
<br>
<label class="zust-radio">
<input type="radio" name="someName">
<span></span>
<span>Vanilla</span>
</label>
The minimum code required to make a radio is:
<label class="zust-radio">
<input type="radio" name="give-a-name">
<span></span>
</label>
Adding label to a radio is super easy.
<label class="zust-radio">
<input type="radio" name="give-a-name">
<span></span>
<span>This is the Label!</span>
</label>
Radio supports all theme colors. Use any of them.
<label class="zust-radio">
<input type="radio" name="give-a-name">
<span></span>
<span>Default</span>
</label>
<br>
<label class="zust-radio zust-success">
<input type="radio" name="give-a-name">
<span></span>
<span>Success</span>
</label>
<br>
<label class="zust-radio zust-warning">
<input type="radio" name="give-a-name">
<span></span>
<span>Warning</span>
</label>
<br>
<label class="zust-radio zust-error">
<input type="radio" name="give-a-name">
<span></span>
<span>Error</span>
</label>
<br>
<label class="zust-radio zust-link">
<input type="radio" name="give-a-name">
<span></span>
<span>Link</span>
</label>
You can make a radio selected/checked by adding attribute checked
to input
.
<label class="zust-radio">
<input type="radio" name="a-unique-name" checked>
<span></span>
<span>Checked</span>
</label>
<br>
<label class="zust-radio">
<input type="radio" name="a-unique-name">
<span></span>
<span>Radio</span>
</label>
Radio can be disabled by adding attribute disabled
to label
and input
.
<label class="zust-radio" disabled>
<input type="radio" name="give-a-name" disabled>
<span></span>
<span>Disabled</span>
</label>
You can make a radio rectangular by adding class zust-rect
or zust-rectangle
.
<label class="zust-radio zust-rectangle">
<input type="radio" name="give-a-name">
<span></span>
<span>Rectangle</span>
</label>