<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white"
		creationComplete="init();">

	<mx:Style>
		FormItem {
			backgroundColor: haloSilver;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;

			private var indicatorGapStyle:CSSStyleDeclaration;

			private function init():void {
				indicatorGapStyle = StyleManager.getStyleDeclaration("FormItem");
			}

			private function slider_change(evt:SliderEvent):void {
				indicatorGapStyle.setStyle("indicatorGap", evt.value);
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Label text="indicatorGap:" />
		<mx:HSlider id="slider"
				minimum="14"
				maximum="100"
				value="14"
				snapInterval="1"
				liveDragging="true"
				dataTipPlacement="bottom"
				dataTipPrecision="0"
				change="slider_change(event);" />
	</mx:ApplicationControlBar>

	<mx:Form>
		<mx:FormItem label="Lorem ipsum:">
			<mx:TextInput />
		</mx:FormItem>
		<mx:FormItem label="The quick brown fox jumped:" required="true">
			<mx:TextInput />
		</mx:FormItem>
		<mx:FormItem label="over the lazy dog:" required="true">
			<mx:Text text="The quick brown fox jumped over the lazy dog." />
		</mx:FormItem>
	</mx:Form>

</mx:Application>
