Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Radio

Nothing much, just simple radio.


Structure


<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>


Making radio

The minimum code required to make a radio is:

<label class="zust-radio">
  <input type="radio" name="give-a-name">
  <span></span>
</label>


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>


Colors

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>


Selected or checked

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>


Disabled

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>


Rectangular radio

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>


checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs