Skip to main content
A switch component provides users with a simple toggle interface to select between two states (on/off, true/false). When users interact with the switch, the corresponding boolean value is automatically stored in the process instance for use in decisions, business rules, and integrations.
Switch component demonstration

​
Configuration overview

Configure your switch component using these main sections:

Basic Settings

Process data binding, labels, and switch type

Data & Validation

Default values, datasources, and validators

Behavior

Hide/disable conditions and UI actions

Styling

Visual appearance and platform-specific overrides

​
Basic configuration

​
Process data key

The process data key creates a binding between your switch component and the process data, enabling you to reference the switch value in:

​
Core properties

Purpose: The visible text displayed alongside the switchFeatures:
  • Supports full Markdown syntax for rich formatting
  • Can include links, emphasis, and other Markdown elements
  • Responsive across all platforms
Use Markdown to enhance your labels with bold, italic, or linked text.
Label with Markdown formatting
Choose the visual representation of your switch:
TypeDescriptionBest Used For
ToggleTraditional sliding switchOn/off states, preferences
CheckboxSquare checkbox interfaceAgreements, confirmations
Purpose: Provide additional context or instructionsOptions:
  • Display as regular text below the switch
  • Hide within an expandable info point tooltip
  • Support for Markdown formatting

​
Data configuration

​
Default value

Set the initial state of your switch component:
  • Default: Switch starts in the “on” position (true)
  • Alternative: Configure to start in the “off” position (false)
Choose your default value carefully as it affects user experience and data collection patterns.

​
Validation rules

Apply these validators to ensure data quality:
  • Required True
  • Custom Validator
Use case: Force users to accept terms, confirm agreementsBehavior: Switch must be in the “on” position to pass validationError message: Customize the message shown when validation fails
Switch validation configuration

​
Behavior configuration

​
Hide/disable expressions

Define the switch element’s behavior using JavaScript expressions to control its visibility or disablement:
  • Hide condition: A JavaScript expression that hides the Switch element when it returns a truthy value.
  • Disabled condition: A JavaScript expression that disables the Switch element when it returns a truthy value.

​
Hide expression example

We can use a rule to hide a switch element if another field has a null value (it is not filled). For example, the “Terms Agreement” switch, which remains hidden until users fill in the “Email” field: Rule used: 
${application.input.email} === null || ${application.input.email} === ""

​
Disable expressions

You can use a disabled condition to disable a switch element based on values from other fields or based on permissions.
It’s important to make sure that disabled fields have the same expression configured under the path expressions → hide.

​
UI actions

Configure interactive behaviors for your switch:
EventDescriptionCommon Use Cases
CHANGETriggered when switch state changesUpdate related fields, trigger calculations, send notifications
Action Types Available:
  • Navigate to different pages
  • Execute business rules
  • Call external services
  • Update other form elements
For detailed UI action configuration, see our UI Actions Guide.

​
Platform customization

​
Settings overrides

Customize your switch differently across platforms:
  • Web Applications
  • Mobile Apps
  • Override labels for web-specific terminology
  • Adjust helper text for desktop users
  • Modify hide/show expressions for web workflows
Platform override import/export
Override settings can be imported and pushed between platforms, saving configuration time.

​
Visual styling

​
Layout options

  • Web Styling
  • iOS Styling
  • Android Styling
Start: Label appears before the switch (left side) End: Label appears after the switch (right side)
OptionBehaviorBest For
FillExpands to use available spaceFull-width layouts
FixedMaintains specified widthConsistent column layouts
AutoAdjusts based on contentDynamic layouts

​
Theme customization

Override default styling for complete visual control:
Theme override interface
Default State:
  • Text color customization
  • Font family and size options
Disabled State:
  • Dimmed text color options
  • Consistent typography
Label styling options
Standard Helper:
  • Text color and font options
Tooltip Helper:
  • Background color customization
  • Icon color options
  • Typography controls
Helper text styling
  • Error message text color
  • Font styling for error states
  • Consistent error indication
Error styling options
  • Unselected (Off)
  • Selected (On)
  • Disabled States
  • Border color customization
  • Background color options
  • Switch knob color
Unselected state styling
Time-Saving Tip: Export your styling configuration from one platform and import it to others to maintain consistency without manual reconfiguration.
Style import/export workflow

​
Best practices

Accessibility

  • Provide clear, descriptive labels
  • Use helper text for complex switches
  • Ensure sufficient color contrast
  • Test with screen readers

User Experience

  • Choose appropriate default values
  • Provide immediate visual feedback
  • Use consistent switch types throughout your application
  • Consider the context when placing switches

Data Management

  • Use meaningful process data keys
  • Plan for boolean value usage in business rules
  • Consider validation requirements early
  • Document switch behavior for other developers

​
Common use cases

ScenarioConfigurationNotes
Terms & ConditionsRequired validator, default offForces user interaction
Feature TogglesNo validation, default variesUser preference setting
PermissionsConditional display/disableRole-based access control
Status IndicatorsRead-only modeDisplay-only information