Making a True-False Component

This page is for application designers who want to create a true-false representation that is different to the default tick box.

By default, a true-false component shows a tick box that is:

• ticked where a value is true
• unticked where a value is false.

You can use different images to represent true-false values. For example, the following image shows a slider that changes colour when the value is true.

To use an image other than the default tick box, use styles and formatting rules.

1. Create two styles, one for the true state and one for the false state.
   For each style, in the style Properties tab → Basic Settings → Background Image, add or select an image to represent the state; see Adding Images.
2. Edit the true-false component to create two formatting rules, one for the true state and one for the false state. 
   1. In the Styles tab →  Formatting Rules section, click  Add New.
   2. In the formatting rule Properties tab →  Basic Settings section:
      • For the true state, set: 
        • Rule Expression: 'true'.
        • Style: select the style with the background image that represents the true state.
      • For the false state, set:
        • Rule Expression: '_form.value'
        • Style:, select the style with the background image that represents the false state.
        • Stop if True: tick
   3. Save each rule.
3. Save the component.