The Switch component allows users to toggle between two states, typically representing on/off or true/false values. It is commonly used for settings, preferences, and feature toggles.
1. Basic Properties
- Name: The unique identifier of the switch (e.g.,
Switch1). - Label: The text displayed next to the switch.
States
- Default Checked: Determines whether the switch is on (
true) by default. - Disabled: Prevents interaction with the switch.
- Hidden: Hides the switch from the UI while keeping it available in logic.
2. Layout
Defines how the switch is displayed across responsive screen sizes and how it aligns with other components.
📘 For details, see Common Properties → Layout.
3. Events
- onChange: Triggered whenever the switch value changes (on ↔ off).
Useful for updating variables, toggling features, or triggering actions.
4. Validations
Validation rules can enforce conditions, such as requiring the switch to be enabled before proceeding.
📘 See Common Properties → Validations.
5. Color & Label Placement
- Color: Defines the theme color of the switch. Options:
primarysecondarydefault
- Label Placement: Defines where the label is positioned relative to the switch:
top,start,bottom,end
6. Style
Custom styles can be applied for further visual customization.
📘 For more information, see Common Properties → Style.
✅ The Switch component provides a simple and intuitive way to toggle settings. With color customization, label placement, and event handling, it can be integrated into both forms and application settings.