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

Zusty Pages are Now Available offline.
New or Updated content available.  Refreshing...

Choose Editor