Skip to main content

Toggle Switch

Introduction​

The Toggle Switch is a beautifully crafted toggle switch component designed specifically for Bubble mobile applications. It is perfect for settings, preferences, and user controls, providing a premium user experience with smooth animations and full customization options.

Features​

  • Three Stunning Styles - Choose from Rounded, Square, or Line designs to match your app's aesthetic
  • Mobile-Optimized - Built specifically for Bubble mobile with perfect touch interactions and responsive design
  • Three Size Options - Small, Medium, and Large variants for different UI contexts
  • Full Color Customization - Customize ON/OFF colors to match your brand identity
  • Smooth Animations - Buttery smooth transitions with spring physics for premium feel
  • Disabled State Support - Professional disabled styling for inactive controls
  • Platform-Adaptive - Automatically adjusts for web and mobile platforms with pixel-perfect positioning
  • Accessibility Ready - Full accessibility support with proper labels and screen reader compatibility
  • State Management - Publishes toggle state and triggers events for seamless Bubble integration
  • Professional Styling - Clean, modern design with subtle shadows and professional polish

How to use​

  1. Place the toggle switch element on the view.
  2. Customize the fields via the property editor, such as on/off colors, size, style, and initial value.
  3. Preview the element and interact by tapping to toggle the state.
  4. Access the toggle state through the exposed state for further workflow integration.

Element Fields​

  • On Color: The color when the toggle is in the on position.
  • Off Color: The color when the toggle is in the off position.
  • Size: Select the size variant (Small, Medium, Large).
  • Style: Choose the design style (Rounded, Square, Line).
  • Initial Value: Set the starting state of the toggle (on or off).
  • Disabled: Enable or disable user interaction with the toggle.

Exposed States​

  • Toggle State: The current state of the toggle (yes/no or on/off).

Events​

  • is switched on: This event fires when the toggle is switched on.
  • is switched off: This event fires when the toggle is switched off.

Editor | Preview