JSFiddle - React, Tailwind, and code Playground

by Derek Gathright

HTML

<div class='yui3-skin-sam'>
    <div id='checkboxContainer'>
        <h2>Checkbox Group</h2>
        <button class='checkbox'>Button 1</button>
        <button class='checkbox'>Button 2</button>
        <button class='checkbox'>Button 3</button>
    </div>

    <div id='radioContainer'>
        <h2>Radio Group</h2>
        <button class='radio'>Button A</button>
        <button class='radio'>Button B</button>
        <button class='radio'>Button C</button>
    </div>
</div>

JavaScript

YUI().use('button-group', function(Y){
    
    Y.ButtonCore.CLASS_NAMES.BUTTON = "myButtonClass";
    Y.ButtonCore.CLASS_NAMES.BUTTON = "myButtonClass-disabled";
    Y.ButtonCore.CLASS_NAMES.BUTTON = "myButtonClass-selected";
    Y.ButtonCore.CLASS_NAMES.BUTTON = "myButtonClass-label";
    
    // A group of checkbox-like buttons
    var buttonGroupCB = new Y.ButtonGroup({
        srcNode: '#checkboxContainer',
        type: 'checkbox',
        on: {
            'selectionChange': function(e){
                var selection = buttonGroupCB.getSelectedButtons();
                Y.log('buttonGroup2 selected count = ' + selection.length);
            }
        }
    }).render();


    // A group of radio-like buttons
    var buttonGroupRadio = new Y.ButtonGroup({
        srcNode: '#radioContainer',
        type: 'radio'
    })
    
    buttonGroupRadio.render();

    buttonGroupRadio.on('selectionChange', function(e){
        Y.log('buttonGroup selection changed');
    });

});