Forms
Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.
Input fields
Standard Fields
Colors
Icon Prefixes
Display Only & Read Only
I am display only
I am read only
Placeholders
Textarea
edit
Select
Return1, Return2, Return3
Radio Buttons
Default Look
Alternative Look
Checkboxes
Default Look






Alternative Look






File Input
File
Date Picker
Popup LOV
Autocomplete
Switch
Range

Shuttle
Example
Template Options

P25_SHUTTLE
Template: Standard

Template OptionValue(s)Comments
Enable ScrollfireYesUse the component "HTML Attributes" and add those attributes: offset="500" callback="apex.event.trigger(document, 'fadeInImage');"
Hide LabelYes
Checkbox & Radio - 2nd LookYes
Display Only - Truncate TextYes
Text AlignmentLeft
Text AlignmentCenter
Text AlignmentRight
Text ColorAmber
Text ColorBlue Grey
Text ColorBlue
Text ColorBrown
Text ColorCyan
Text ColorDeep Orange
Text ColorDeep Deep Purple
Text ColorGreen
Text ColorGrey
Text ColorLight Indigo
Text ColorLight Blue
Text ColorLight Green
Text ColorLime
Text ColorLight Orange
Text ColorPink
Text ColorPurple
Text ColorRed
Text ColorTeal
Text ColorWhite
Text ColorYellow
Display Only - Text SizeResponsive TextDefines the size of the text.
Display Only - Text SizeH1Defines the size of the text.
Display Only - Text SizeH2Defines the size of the text.
Display Only - Text SizeH3Defines the size of the text.
Display Only - Text SizeH4Defines the size of the text.
Display Only - Text SizeH5Defines the size of the text.
Display Only - Text SizeH6Defines the size of the text.
Hiding ContentHidden for All Devices
Hiding ContentHidden for Small Only
Hiding ContentHidden for Medium Only
Hiding ContentHidden for Large Only
Hiding ContentHidden for Medium and Below
Hiding ContentHidden for Medium and Above
Hiding ContentHidden for Small and Large
Margin top0Apply "Margin top" to any element with a template option.
Margin top1Apply "Margin top" to any element with a template option.
Margin top2Apply "Margin top" to any element with a template option.
Margin top3Apply "Margin top" to any element with a template option.
--------- bottom0Apply "Margin bottom" to any element with a template option.
--------- bottom1Apply "Margin bottom" to any element with a template option.
--------- bottom2Apply "Margin bottom" to any element with a template option.
--------- bottom3Apply "Margin bottom" to any element with a template option.
--------- right0Apply "Margin right" to any element with a template option.
--------- right1Apply "Margin right" to any element with a template option.
--------- right2Apply "Margin right" to any element with a template option.
--------- right3Apply "Margin right" to any element with a template option.
--------- left0Apply "Margin left" to any element with a template option.
--------- left1Apply "Margin left" to any element with a template option.
--------- left2Apply "Margin left" to any element with a template option.
--------- left3Apply "Margin left" to any element with a template option.
Padding top0Apply "Padding top" to any element with a template option.
Padding top1Apply "Padding top" to any element with a template option.
Padding top2Apply "Padding top" to any element with a template option.
Padding top3Apply "Padding top" to any element with a template option.
----------- bottom0Apply "Padding bottom" to any element with a template option.
----------- bottom1Apply "Padding bottom" to any element with a template option.
----------- bottom2Apply "Padding bottom" to any element with a template option.
----------- bottom3Apply "Padding bottom" to any element with a template option.
----------- right0Apply "Padding right" to any element with a template option.
----------- right1Apply "Padding right" to any element with a template option.
----------- right2Apply "Padding right" to any element with a template option.
----------- right3Apply "Padding right" to any element with a template option.
----------- left0Apply "Padding left" to any element with a template option.
----------- left1Apply "Padding left" to any element with a template option.
----------- left2Apply "Padding left" to any element with a template option.
----------- left3Apply "Padding left" to any element with a template option.