Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Controls > NumericStepper control

NumericStepper control

You can use the NumericStepper control to select a number from an ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons for stepping through the valid values; you can also use the Up Arrow and Down Arrow keys to cycle through the values.

The following example shows a NumericStepper control:

For the code used to create this image, see Creating a NumericStepper control.

If the user clicks the up arrow, the value displayed is increased by one unit of change. If the user holds down the arrow, the value increases or decreases until the user releases the mouse button. When the user clicks the arrow, it is highlighted to provide feedback to the user.

Users can also type a legal value directly into the text field. Although editable ComboBox controls provide similar functionality, NumericStepper controls are sometimes preferred because they do not require a drop-down list that can obscure important data.

NumericStepper control arrows always appear to the right of the text field.

The NumericStepper control has the following default properties:

Subtopics

Creating a NumericStepper control

You define a NumericStepper control in MXML using the <mx:NumericStepper> tag, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

<?xml version="1.0"?>
<!-- controls\numericstepper\NumStepSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:NumericStepper id="nstepper1" value="6" stepSize="2"/>
</mx:Application>

Sizing a NumericStepper control

The up and down arrow buttons in the NumericStepper control do not change size when the control is resized. If the NumericStepper control is sized greater than the default height, the associated stepper buttons appear pinned to the top and the bottom of the control.

User interaction

If the user clicks the up or down arrow button, the value displayed is increased by one unit of change. If the user presses either of the arrow buttons for more than 200 milliseconds, the value in the input field increases or decreases, based on step size, until the user releases the mouse button or the maximum or minimum value is reached.

Keyboard navigation

The NumericStepper control has the following keyboard navigation features:

In order to use the keyboard to navigate through the stepper, it must have focus.

Flex 2.01