Simple button radios

Issue     Star     Download

Simple button radios is a simple plugin for transform radio inputs into html buttons for css customize. High performance, keyboard support and preserve original input click/change events.

Getting started

1. Include Simple button radios files to website/app

After that we need to include CSS and JS files to our website/app. In your html file:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="path/to/simple-button-radios.css"> </head> <body> <script src="path/to/jquery/3.x.x.min.js"></script> <script src="path/to/simple-button-radios.js"></script> </body> </html>

2. Add html inputs

This plugin contemplates several label-input formats:

<div class="radio"> <input type="radio" name="example" id="example1" value="1" checked> <label for="example1">Use address 1</label> </div> <div class="radio"> <input type="radio" name="example" id="example2" value="2"> <label for="example2">Use address 2</label> </div> <!-- or --> <div class="radio"> <label for="example1">Use address 1</label> <input type="radio" name="example" id="example1" value="1" checked> </div> <div class="radio"> <label for="example2">Use address 2</label> <input type="radio" name="example" id="example2" value="2"> </div>

3. Initialize plugin

After load jquery and simple-button-radios js files

$(document).ready(function () { // initialize plugin into document ready $('input[type="radio"]').simpleButtonRadios(); });


Parameter Type Default Description
buttonClass string 'sbr-default' Class attribute value for new html button tag
checkedIcon string '<svg aria-hidden="true" xmlns="" viewBox="-725.53 115.775 1451.338 1451.338"><path d="M.141 376.731c-256.717 0-464.713 207.995-464.713 464.713 0 256.72 207.997 464.715 464.713 464.715 256.718 0 464.712-207.995 464.712-464.715 0-256.718-207.994-464.713-464.712-464.713z"/></svg>' button inner html when input is checked
nonCheckedIcon string '' button inner html when input is not checked
wrapContainer string 'none' Values: 'none' or 'input' or 'all'. Wrap with a div label and input, only input or nothing.
btnAttributes object { type : 'button' } Add attribute name - value into new html button. Example:
btnAttributes: {
  data-title : 'string value'


Parameter Type Default Description
onInit(simpleButtonRadios) function null Callback function, will be executed right after plugin initialization
onChange(simpleButtonRadios) function null Function, will be executed right before radio input change
changeCallback(simpleButtonRadios) function null Callback function, will be executed right after radio input change
onDestroy(simpleButtonRadios) function null Callback function, will be executed when you destroy Swiper


After we initialize input/s we have its initialized instance in variable (like myInput variable in example below) with helpful methods:

var myInput = $('#check-1').simpleButtonRadios({ checkedIcon : '<span class="custom-icon"></span>' }); myInput.simpleButtonRadios('destroy');

Method Description
myInput.simpleButtonRadios('destroy'); Destroy simpleButtonRadios instance and detach all events listeners
myInput.simpleButtonRadios('addListener', node); Add change radio input event to a node. Example:
myInput.simpleButtonRadios('addListener', $('#div-1'));
myInput.simpleButtonRadios('disable', boolean); Enable | disable input. Example:
myInput.simpleButtonRadios('disable', true);
myInput.simpleButtonRadios('update'); Refresh all radios grouped by name attr



Defaults & js check tests

Add dynamic radios



  • Fix on destroy and disable public methods undefined data
  • Fix apply method on elements without data
  • Fix destroy method not remove focus events


  • Add update method
  • Update demos and add demo with dynamic inputs


  • Fix bug inputId is undefined


  • Now is possible unckeck all radios
  • Removed strictLabel option, use native browser function
  • Update documentation info and add default plugin demos