Toggle Button
Last updated
Was this helpful?
Last updated
Was this helpful?
The Toggle Button component in Lowcoder provides an intuitive interface for users to switch between two states, such as "On" and "Off" or "Enabled" and "Disabled." This component is ideal for settings, preferences, and binary choices within applications.
Binary Toggle: Offers a simple interface for toggling between two states.
Customisable Labels: Allows setting custom labels for both "On" and "Off" states to enhance clarity.
Dynamic Binding: Supports binding to variables or data sources for real-time state management.
Event Handling: Triggers actions based on state changes, facilitating interactive application behavior.
Styling Options: Provides customization of appearance to align with application design.
Default State: Set the initial state of the toggle (On/Off) upon component load.
Disabled State: Disable the toggle to prevent user interaction when necessary.
Labels: Define custom text labels for both states to provide context.
Styling: Customize dimensions, colors, and other visual aspects to match your application's theme.
Event Handlers: Define actions to be executed upon state changes, such as updating data or triggering other components.
Data Binding: Use Lowcoder's data binding syntax ({{ }}) to connect the toggle state to variables or data sources.
Event Handling: Implement event handlers to perform actions when the toggle state changes, such as updating a database or triggering notifications.
Combining with Other Components: Integrate the Toggle Button component with forms, settings panels, or other interactive elements to enhance user experience.
On Component Playground, you can interact with the Toggle Button component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Toggle Button component.
In the Auto-Docs of Toggle Button component, we have shown how to use different properties of the Toggle Button component. It also includes the Styling properties of the Toggle Button component.
These properties are accessible in {{ }} notations, as well as in JavaScript Queries.
value
Boolean
Returns True or False based on whether the Toggle Button component is True or Not
disabled
Boolean
Returns True or False based on whether the Toggle Button component is disabled or not
hidden
Boolean
Returns True or False based on whether the Toggle Button component is hidden or not
loading
Boolean
Returns True or False based on whether the Toggle Button component is hidden or not
Events give you the ability to trigger further actions (with Event-Handlers).
Change
Triggers, when anything Changes on the Toggle Button component
You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.
setValue() :
toggleButton1.setValue() method sets the Toggle Button component's Value property, which gets shown in the Toggle Button component.
clearValue() :
toggleButton1.clearValue() clears the Toggle Button component's Value property and empties the value from the Toggle Button component.
resetValue() :
toggleButton1.resetValue() method resets the Toggle Button component's value property to the default value of the Toggle Button component.
Feature Toggles: Allow users to enable or disable specific features within the application.
Preference Settings: Enable users to set preferences, such as dark mode or notifications.
Access Controls: Manage user access to certain functionalities or sections of the application.
Form Inputs: Collect binary responses in forms or surveys.
