Creating a non-editable NumericStepper control in Flex

The following example shows how you can create a non-editable Flex NumericStepper control (users cannot type numbers directly into the control, but can still use the up arrow, down arrow, and keyboard to change the value) by setting the editable property on the nested inputField TextInput control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/17/creating-a-non-editable-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var value:Boolean = checkBox.selected;
                numericStepper.mx_internal::inputField.editable = value;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="editable:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            width="100" />

</mx:Application>

View source is enabled in the following example.