Radiocharm
A Demo In Radio Box Styling / Interactivity

Default Implementation

Default implementation using data-radiocharm-label as the label for each option.

HTML

<input checked data-radiocharm-label="First" type="radio" />
<input data-radiocharm-label="Second" type="radio" />
<input data-radiocharm-label="Third" type="radio" />

Javascript

$(document).ready(function(){
$('input:radio').radiocharm();
});

Background Color Implementation

Background color implementation using data-radiocharm-background-color to change the background colors for each option. Additionally, you can use data-radiocharm-text-color if you need to change the color of the text.

HTML

<input checked data-radiocharm-background-color="5cb85c" data-radiocharm-label="First" type="radio" />
<input data-radiocharm-label="Second" data-radiocharm-background-color="f0ad4e" type="radio" />
<input data-radiocharm-label="Third" data-radiocharm-background-color="c9302c" type="radio" />

Javascript

$(document).ready(function(){
$('input:radio').radiocharm();
});

Icon Implementation

Icon implementation using data-radiocharm-icon to change the icon for each option.

HTML

<input checked data-radiocharm-label="First" data-radiocharm-icon="thumbs-up" type="radio" />
<input data-radiocharm-label="Second" data-radiocharm-icon="thumbs-down" type="radio" />
<input data-radiocharm-label="Third" data-radiocharm-icon="pencil" type="radio" />

Javascript

$(document).ready(function(){
$('input:radio').radiocharm();
});

Uncheckable Implementation

Uncheckable implementation using uncheckable setting to be passed over on initialization. Default is false.

HTML

<input checked data-radiocharm-label="First" type="radio" />
<input data-radiocharm-label="Second" type="radio" />
<input data-radiocharm-label="Third" type="radio" />

Javascript

$(document).ready(function(){
$('input:radio').radiocharm({
uncheckable: true
});
});