The CheckBox control is a commonly used graphical control that can contain a check mark or be unchecked (empty). You can use CheckBox controls wherever you need to gather a set of true or false values that aren't mutually exclusive.

You can add a text label to a CheckBox control and place it to the left, right, top, or bottom. Flex clips the label of a CheckBox control to fit the boundaries of the control.

The following image shows a checked CheckBox control:

For the code used to generate this example, see Creating a CheckBox control.

When a user clicks a CheckBox control or its associated text, the CheckBox control changes its state from checked to unchecked, or from unchecked to checked.

A CheckBox control can have one of two disabled states, checked or unchecked. By default, a disabled CheckBox control displays a different background and check mark color than an enabled CheckBox control.

Creating a CheckBox control

You use the <mx:CheckBox> tag to define a CheckBox control in MXML, 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\checkbox\CBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:CheckBox width="100" label="Employee?"/> 
    </mx:VBox>
</mx:Application> 
The executing SWF file for the previous example is shown below:

You can also use the selected property to generate a checkbox that is checked by default:

<?xml version="1.0"?>
<!-- controls\checkbox\CBSelected.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:CheckBox width="100" label="Employee?" selected="true"/> 
    </mx:VBox>
</mx:Application> 
The executing SWF file for the previous example is shown below:

CheckBox control user interaction

When a CheckBox control is enabled and the user clicks it, the control receives focus and displays its checked or unchecked appearance, depending on its initial state. The entire area of the CheckBox control is the click area; if the CheckBox control's text is larger than its icon, the clickable regions are above and below the icon.

If the user moves the mouse pointer outside the area of the CheckBox control or its label while pressing the mouse button, the appearance of the CheckBox control returns to its original state and the control retains focus. The state of the CheckBox control does not change until the user releases the mouse button over the control.

Users cannot interact with a CheckBox control when it is disabled.