Radio

Radio buttons allow the user to select one option from a set.

This page is not up to date. Some of the examples might not work as expected.

Class name	Type
radio	Component	For radio input
radio-primary	Color	primary color
radio-secondary	Color	secondary color
radio-accent	Color	accent color
radio-success	Color	success color
radio-warning	Color	warning color
radio-info	Color	info color
radio-error	Color	error color
radio-xs	Size	Extra small size
radio-sm	Size	Small size
radio-md	Size	Medium size (default)
radio-lg	Size	Large size
radio-xl	Size	Extra large size

Radio

<input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" />

<input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" />

            
                <input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" />

<input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" />

Primary color

<input type="radio" name="radio-2" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-primary" />

<input type="radio" name="radio-2" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-primary" />

            
                <input type="radio" name="radio-2" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-primary" />

<input type="radio" name="radio-2" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-primary" />

Secondary color

<input type="radio" name="radio-3" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-secondary" />

<input type="radio" name="radio-3" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-secondary" />

            
                <input type="radio" name="radio-3" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-secondary" />

<input type="radio" name="radio-3" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-secondary" />

Accent color

<input type="radio" name="radio-4" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-accent" />

<input type="radio" name="radio-4" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-accent" />

            
                <input type="radio" name="radio-4" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-accent" />

<input type="radio" name="radio-4" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-accent" />

Success color

<input type="radio" name="radio-5" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-success" />

<input type="radio" name="radio-5" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-success" />

            
                <input type="radio" name="radio-5" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-success" />

<input type="radio" name="radio-5" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-success" />

Warning color

<input type="radio" name="radio-6" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-warning" />

<input type="radio" name="radio-6" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-warning" />

            
                <input type="radio" name="radio-6" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-warning" />

<input type="radio" name="radio-6" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-warning" />

Info color

<input type="radio" name="radio-7" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-info" />

<input type="radio" name="radio-7" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-info" />

            
                <input type="radio" name="radio-7" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-info" />

<input type="radio" name="radio-7" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-info" />

Error color

<input type="radio" name="radio-8" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-error" />

<input type="radio" name="radio-8" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-error" />

            
                <input type="radio" name="radio-8" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-error" />

<input type="radio" name="radio-8" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-error" />

Disabled

<input type="radio" name="radio-9" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-9" class="$$radio" disabled />

<input type="radio" name="radio-9" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-9" class="$$radio" disabled />

            
                <input type="radio" name="radio-9" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-9" class="$$radio" disabled />

<input type="radio" name="radio-9" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-9" class="$$radio" disabled />

With label and form-control and custom colors!

Red pill

Blue pill

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Red pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-red-500" checked="checked" />
  </label>
</div>
<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Blue pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-blue-500" checked="checked" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Red pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-red-500" checked="checked" />
  </label>
</div>
<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Blue pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-blue-500" checked="checked" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Red pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-red-500" checked="checked" />
  </label>
</div>
<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Blue pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-blue-500" checked="checked" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Red pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-red-500" checked="checked" />
  </label>
</div>
<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Blue pill</span>
    <input type="radio" name="radio-10" class="$$radio checked:bg-blue-500" checked="checked" />
  </label>
</div>