Labels and Icons

Customize the toggle switch appearance with labels and icons for better usability and visual clarity.

Overview

The SiticoneToggleSwitch allows developers to add custom labels and icons to improve toggle state visibility. This feature is especially useful when designing more intuitive user interfaces.

---

1. Label Customization 🏷️

Labels can be used to indicate ON/OFF states, making the control more user-friendly and accessible.

Property	Type	Description
ShowLabels	bool	Enables/disables label visibility.
OnLabel	string	Text displayed when the switch is ON.
OffLabel	string	Text displayed when the switch is OFF.
LabelFont	Font	Font used for ON/OFF labels.
LabelColor	Color	Defines the color of the labels.

Usage Example

myToggleSwitch.ShowLabels = true;
myToggleSwitch.OnLabel = "Enabled";
myToggleSwitch.OffLabel = "Disabled";
myToggleSwitch.LabelFont = new Font("Segoe UI", 10, FontStyle.Bold);
myToggleSwitch.LabelColor = Color.DarkGray;

---

2. Icon Customization 🎨

Icons can be displayed inside the toggle thumb to visually represent ON/OFF states.

Property	Type	Description
OnIcon	Image	Custom icon displayed in the thumb when ON.
OffIcon	Image	Custom icon displayed in the thumb when OFF.

Usage Example

myToggleSwitch.OnIcon = Image.FromFile("power_on.png");
myToggleSwitch.OffIcon = Image.FromFile("power_off.png");

---

3. When to Use These Features? ✅

Feature	Use Case
Labels	Useful when text-based indications for ON/OFF states are preferred.
Icons	Helps in visual representation of toggle states.
Both	Combines text and icons for better clarity and usability.

---

4. Common Pitfalls & Design Considerations 🛑

Pitfall	Cause	Solution
Labels not visible	ShowLabels = false	Set ShowLabels = true.
Icons not appearing	OnIcon or OffIcon not assigned	Ensure both OnIcon and OffIcon have valid images.
Text overlapping with the switch	Large font size	Adjust LabelFont and LabelColor for better readability.
Icon too large or cropped	Image resolution too high	Resize icons to fit the toggle thumb properly.

---

5. Points Learned 🎯

Point	Description
Labels improve user understanding of the switch state.	Users can instantly recognize ON/OFF status.
Icons provide a more visual approach to toggle states.	Helps in quick state identification.
A combination of labels and icons improves accessibility.	Suitable for different user preferences.

---

6. Review Checklist ✔️

Item	Check
Are labels visible when enabled?	✅
Are icons properly displayed inside the thumb?	✅
Is the label text readable and positioned correctly?	✅
Are icons correctly sized to fit inside the switch?	✅

---

7. Key Takeaways

Key Takeaway	Description
Labels make toggle states more readable.	Helpful for accessibility and clarity.
Icons improve the visual appeal of the switch.	Provides quick identification of states.
Both labels and icons together create a better UX.	Enhances understandability and user engagement.
Proper design considerations prevent UI issues.	Adjust font size, color, and icon resolution accordingly.

---

8. Summary 📌

8.1 Feature Summary

Feature	Type	Description
ShowLabels	bool	Enables/disables ON/OFF labels.
OnLabel	string	Text displayed when ON.
OffLabel	string	Text displayed when OFF.
LabelFont	Font	Defines the font for labels.
LabelColor	Color	Sets the color of labels.
OnIcon	Image	Custom icon for ON state.
OffIcon	Image	Custom icon for OFF state.

8.2 Key Benefits

Benefit	Description
Improves accessibility and usability.	Makes toggle state clear and readable.
Enhances UI design with visual elements.	Icons make state changes instantly recognizable.
Flexible customization for various applications.	Works well for both textual and graphical interfaces.