Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 22:17:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8
ToolJet/docs/versioned_docs/version-3.0.0-LTS/widgets/toggle-switch-v2.md
Aman Regu dc57882f89 docs: add 3.0 version
2025-05-02 13:26:57 +05:30

9.1 KiB
Raw Blame History

id title
toggle-switch-v2 Toggle Switch

The Toggle Switch component can be used for binary choices, such as turning a feature on/off or enabling/disabling a setting.

:::info To get the configuration of legacy Toggle Switch component, please refer to this document. :::

Properties

Data

Property Description Expected Value
Label The text to be used as the label for the toggle switch. String (e.g., Enable notifications).
Default status Sets the default status when the app is loaded. Toggle the on/off switch or click on fx and dynamically set the value.

Events

<div style={{ width:"100px"}}> Event <div style={{ width:"100px"}}> Description
On change On change event is triggered when toggle switch input is changed.
On check (deprecated) On check event is triggered when toggle switch input is checked.
On uncheck (deprecated) On uncheck event is triggered when toggle switch input is unchecked.

:::info Check Action Reference docs to get the detailed information about all the Actions. :::

Component Specific Actions (CSA)

Following actions of Toggle switch component can be controlled using the component specific actions(CSA):

<div style={{ width:"100px"}}> Action <div style={{ width:"135px"}}> Description <div style={{ width:"135px"}}> How To Access
setChecked Changes the status of the toggle switch component using component-specific action from within any event handler. Employ a RunJS query (e.g., await components.toggleswitch1.setChecked(true)) or trigger it using an event.
setValue Sets the value of the toggle switch. Employ a RunJS query (e.g., await components.toggleswitch1.setValue(true)) or trigger it using an event.
setLoading Toggles the loading state of the toggle switch. Employ a RunJS query (e.g., await components.toggleswitch1.setLoading(true)) or trigger it using an event.
setVisibility Changes the visibility of the toggle switch. Employ a RunJS query (e.g., await components.toggleswitch1.setVisibility(true)) or trigger it using an event.
setDisable Disables or enables the toggle switch. Employ a RunJS query (e.g., await components.toggleswitch1.setDisable(true)) or trigger it using an event.
toggle Toggles the current state of the toggle switch. Employ a RunJS query (e.g., await components.toggleswitch1.toggle()) or trigger it using an event.

Exposed Variables

<div style={{ width:"100px"}}> Variables <div style={{ width:"135px"}}> Description <div style={{ width:"135px"}}> How To Access
value Holds the boolean value true if the toggle switch is checked and false if unchecked. Accessible dynamically with JS (e.g., {{components.toggleswitch1.value}}).
label The text label of the toggle switch. Accessible dynamically with JS (e.g., {{components.toggleswitch1.label}}).
isValid Indicates if the toggle switch state is valid. Accessible dynamically with JS (e.g., {{components.toggleswitch1.isValid}}).
isMandatory Indicates if the toggle switch is mandatory. Accessible dynamically with JS (e.g., {{components.toggleswitch1.isMandatory}}).
isLoading Indicates if the toggle switch is in a loading state. Accessible dynamically with JS (e.g., {{components.toggleswitch1.isLoading}}).
isVisible Indicates if the toggle switch is visible. Accessible dynamically with JS (e.g., {{components.toggleswitch1.isVisible}}).
isDisabled Indicates if the toggle switch is disabled. Accessible dynamically with JS (e.g., {{components.toggleswitch1.isDisabled}}).

Validation

<div style={{ width:"100px"}}> Validation Option <div style={{ width:"200px"}}> Description <div style={{width: "200px"}}> Expected Value
Make this field mandatory Displays a 'Field cannot be empty' message if no value is entered. Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Custom validation Specifies a validation error message for specific conditions. Logical Expression (e.g., {{components.toggleswitch1.value === false &&"Value needs to be checked"}}).

To add regex inside Custom Validation, you can use the below format:

Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}

Example: {{(/^\d{1,10}$/.test(components.textinput1.value)) ? '' : 'Error message';}}

Additional Actions

<div style={{ width:"100px"}}> Action <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Loading state Enables a loading spinner, often used with the isLoading property to indicate progress. Toggle or set dynamically. Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility Controls component visibility. Toggle or set dynamically. Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Disable Enables or disables the component. Toggle or set dynamically. Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip Provides additional information on hover. Set a string value for display. String (e.g., Are you a registered user? ).

Devices

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Expected Value
Show on desktop Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Label

<div style={{ width:"100px"}}> Label Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Text color Sets the color of the component's label. Select the color or click on fx and input code that programmatically returns a Hex color code.
Alignment Sets the position of the label and input field. Click on the toggle options or click on fx to input code that programmatically returns an alignment value - left or right.

Switch

<div style={{ width:"100px"}}> Label Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Border color Sets the color of the toggle switch. Select the color or click on fx and input code that programmatically returns a Hex color code.
Checked color Sets the color of the toggle switch when it is checked. Select the color or click on fx and input code that programmatically returns a Hex color code.
Unchecked color Sets the color of the toggle switch when it is not checked. Select the color or click on fx and input code that programmatically returns a Hex color code.
Handle color Sets the color of the checked symbol inside the toggle switch. Select the color or click on fx and input code that programmatically returns a Hex color code.
Box shadow Sets the box shadow properties of the component. Select the box shadow color and adjust the related properties or set it programmatically using fx.