Radio

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

Class name	Type
radio	Component	For radio input
radio-neutral	Color	neutral color
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

Each set of radio inputs should have uniquenameattributes to avoid conflicts with other sets of radio inputs on the same page.

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

Radio sizes

<input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" />

<input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" />

            
                <input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" />

<input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" />

Neutral color

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

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

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

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

Primary color

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

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

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

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

Secondary color

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

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

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

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

Accent color

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

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

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

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

Success color

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

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

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

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

Warning color

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

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

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

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

Info color

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

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

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

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

Error color

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

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

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

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

Disabled

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

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

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

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

Radio with custom colors

<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />

<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />

            
                <input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />

<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
  type="radio" name="radio-12" checked="checked"
  class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />