Jump to Table of Contents

Example: Managing groups of buttons with button-group

In this example, we'll look at a few ways to create groups of buttons using the 'button-group' module.

Checkbox Group

Radio Group

Source: HTML

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning. 

<div class='yui3-skin-sam'> <!-- You need this skin class -->
    <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>

Source: JavaScript

YUI().use('button-group', function(Y){

    // 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');
    });

});

Examples