Form

Various form elements user can input

Form controls are the interactive components in your app's user interface. There is a wide variety of controls you can use in your project, such as buttons, text fields, sliders, checkboxes, lists, and many more. Each control has certain attributes that vary according to the selected input control type.

Add form control

1. Select page

2. Do one of the following:

   • Click on Toolbar

   • Select Insert > Widgets > Form

3. Open Widget Inspector

4. Select controls type from Type list

Button

1. Select form widget

2. Select Button in

3. Enter label text in Label field

4. Enable Checkable for two-states button that can be either checked or unchecked.

   • Enable or disable Checked to set initial state

Image button

1. Click Image and select image file

2. Click Selected image and select image file for clicked or checked state

3. Change Image size to show text label. You can also select Image position.

Text field

Single-line text input.

1. Enter initial text in Text field

Text area

Multi-line text input.

1. Enter initial text in Text field

Slider

Control that inputs a linear value.

1. Enter initial slider value in Index field

2. Set slider minimum and maximum values

3. Enter slider step size in Step field

Listview

Listview is a view for presenting lists of data, especially long lists that require scrolling.

1. Enter list items in List field, each from new line

2. Enter initial selected index in Index field

3. Select vertical or horizontal orientation from Orientation list

Switch

Control that provides a toggled value.

1. Enable or disable Checked to set initial state.

Customize control style

1. Select Form

2. Open Widget Inspector

3. In Controls style section do one of the following:

   • Click Color to select new color (on the right is form color when checked);

   • Select border color (on the right - border color when checked) in border color field;

   • Select border size in border size field;

   • Select radius in border radius field;

   • Select color for checked text in selected font field;

   • Select button position in image position field, if ImageButton is selected;

   • Select button size in image size field, if ImageButton is selected;

   • Select slider color in slider color field (on the right - slider color when checked), if Slider is selected;

   • Select slider size in slider size field;

   • Select the number of visible items in visible items field, if Tumbler is selected.