Input group
Allows users to add an icon, text, or menu to input views such as date, time, text, and
so on. It adjusts its size to the size of the contained form view.
Configuration properties
Under Configuration, set or modify the configuration properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon
beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Input group view are listed in the following
table:
Appearance configuration property | Description | Data type |
---|---|---|
Width
![]() |
The width of the view. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. | String |
Label placement
![]() |
The label placement for this view. A left placement of the label changes the specified width of the view. | String |
Label width ![]() |
The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. | String |
Color style | The color style for the view. The colors correspond to variables in the specified theme. | String |
Button location | The button location relative to the field. | String |
Button type | You can create the view as a clickable icon, a text field, or a menu. Use the Menu option with a Pop-up Menu view. For more information about this view, see Pop-up menu. | String |
Button info | The name of the icon. See Font Awesome V4.7.0 for a complete list of icons. |
String |
Example
To create an Input group with a calculator icon next to an Integer input
field , drop an Integer view into an Input group view and set the Input group options as
follows:
- Leave Width blank.
- Set Label placement to Top.
- Set Color style to Primary.
- Set Button location to Left.
- Set Button type to Icon.
- Set Button info to calculator.
Configuring the Input group in a read-only section
If the input group is nested within a section that is set to 
read only
, such as
a horizontal layout or vertical layout, the icon becomes slightly dimmer. 
A dim icon can be inconvenient if other icon views outside the read-only section are set to the
same color. To ensure that the color of the icon does not change when it is nested in a read-only
section, you can set the on load event handler to use the
setEnabled
method. me.setEnabled(true)
Events
Set or modify the event handlers for the view in the Events tab. You can set events to be triggered programmatically or when a user interacts with the view. For information on how to define and code events, see User-defined events.You can
use JavaScript logic to modify the effects of the view. For the Input group view, you can activate
the following event handlers:
- On load when the page loads, for example
me.setIcon("rocket");
- On button click when an icon used as a button is clicked, for example
${PopupMenu1}.setMenuVisible(!${PopupMenu1}.isMenuVisible())
Methods
For more information about the available methods, see the Input group JavaScript API.
Additional resources
For information about how to create a coach or page, see Building coaches.
For information about standard properties
(General, Configuration,
Positioning, Visibility, and HTML
Attributes), see View properties.
For more information about input views, see Plain text, Text area, Date/time picker, Integer.