Switch

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.

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 event handlers

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

Label

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.

Switch Type

Choose the visual representation of your switch:

Type	Description	Best Used For
Toggle	Traditional sliding switch	On/off states, preferences
Checkbox	Square checkbox interface	Agreements, confirmations

Helper Text

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

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.

Event handlers

Configure interactive behaviors for your switch:

Event	Description	Common Use Cases
CHANGE	Triggered when switch state changes	Update 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 event handler configuration, see the Event Handlers 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

Override settings can be imported and pushed between platforms, saving configuration time.

Visual styling

Layout options

Web Styling
iOS Styling
Android Styling

Label Position

Start: Label appears before the switch (left side) End: Label appears after the switch (right side)

Responsive Sizing

Option	Behavior	Best For
Fill	Expands to use available space	Full-width layouts
Fixed	Maintains specified width	Consistent column layouts
Auto	Adjusts based on content	Dynamic layouts

Theme customization

Override default styling for complete visual control:

Label Styling

Default State:

Text color customization
Font family and size options

Disabled State:

Dimmed text color options
Consistent typography

Helper Text Styling

Standard Helper:

Text color and font options

Tooltip Helper:

Background color customization
Icon color options
Typography controls

Error State Styling

Error message text color
Font styling for error states
Consistent error indication

Switch States

Unselected (Off)
Selected (On)
Disabled States

Border color customization
Background color options
Switch knob color

Time-Saving Tip: Export your styling configuration from one platform and import it to others to maintain consistency without manual reconfiguration.

Best practices

Accessibility

Provide clear, descriptive labels
Use helper text for complex switches
Set an accessibility label when the switch has no visible label

See the Accessibility guide for keyboard navigation and screen reader details.

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

Scenario	Configuration	Notes
Terms & Conditions	Required validator, default off	Forces user interaction
Feature Toggles	No validation, default varies	User preference setting
Permissions	Conditional display/disable	Role-based access control
Status Indicators	Read-only mode	Display-only information

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

Resources

API reference

Configuration overview

Basic Settings

Data & Validation

Behavior

Styling