#

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

    });