<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="toggleOnClick"
                selected="true" />

        <mx:Label text="selectedIndex: {toggleButtonBar.selectedIndex}"
                textAlign="center"
                width="100%" />

        <mx:Label text="direction:" />
        <mx:ComboBox id="comboBox"
                change="toggleButtonBar.direction = comboBox.selectedLabel">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="horizontal" />
                    <mx:Object label="vertical" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:HBox>
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{viewStack}"
                toggleOnClick="{checkBox.selected}" />

        <mx:ViewStack id="viewStack"
                width="160"
                height="120"
                visible="{toggleButtonBar.selectedIndex > -1}">
            <mx:Canvas label="Red" backgroundColor="red" />
            <mx:Canvas label="Orange" backgroundColor="haloOrange" />
            <mx:Canvas label="Yellow" backgroundColor="yellow" />
            <mx:Canvas label="Green" backgroundColor="haloGreen" />
            <mx:Canvas label="Blue" backgroundColor="haloBlue" />
        </mx:ViewStack>
    </mx:HBox>

</mx:Application>