How to use the Feathers Check component

The Check component is actually a ToggleButton component, but it is given a different visual appearance.

The Basics

A Check component can be created much like a ToggleButton:

var check:Check = new Check();
check.label = "Click Me";
check.isSelected = true;
this.addChild( check );

See How to use the Feathers ToggleButton component for a more detailed look at this component's capabilities.

Skinning a Check

A skinned Check component usually has no background (or a transparent one) and the touch states of the check are displayed through the icon skins. For full details about what skin and style properties are available, see the Check API reference.

As mentioned above, Check is a subclass of ToggleButton. For more detailed information about the skinning options available to Check, see How to use the Feathers ToggleButton component.

Targeting a Check in a theme

If you are creating a theme, you can specify a function for the default styles like this:

getStyleProviderForClass( Check ).defaultStyleFunction = setCheckStyles;

If you want to customize a specific check to look different than the default, you may use a custom style name to call a different function:

check.styleNameList.add( "custom-check" );

You can specify the function for the custom style name like this:

getStyleProviderForClass( Check )
    .setFunctionForStyleName( "custom-check", setCustomCheckStyles );

Trying to change the check's styles and skins outside of the theme may result in the theme overriding the properties, if you set them before the check was added to the stage and initialized. Learn to extend an existing theme to add custom skins.

If you aren't using a theme, then you may set any of the check's properties directly.