The purpose of toggles is to offer users a quick and straightforward method to switch between two distinct options or states. Toggles enhance the user experience by providing a clear and efficient way to make selections or enable/disable functionality.
Toggles are commonly used to enable or disable settings, toggle between modes or perform binary actions in user interfaces. When users interact with toggles, they change their appearance to indicate the current state or selection.
Anatomy
The anatomy of a toggle can differ depending on use case. This is the the most commonly used features of a select.
- Handle. An elevated dot with shadow-ui-outward indicating interactivity.
- Fill OFF. Fill color-grey-300 indicating that the toggle is OFF.
- Inner shadow. For toggles the background fill has shadow-ui-inward.
- Fill ON. Fill color-brand-400 indicating that the toggle is ON.