Toggle

Toggle UI — Component Overview

The Toggle in Emvi UI is a binary control that quickly switches between two opposing states (on/off). It is optimized for instantaneous configuration changes (e.g., enable notifications, dark mode, activate/deactivate a rule) where the action takes effect immediately without extra confirmations.

The component supports size variants (SM/MD/LG), densities (compact/comfortable), states (on/off, hover, focus, disabled, loading), and theme styles (light/dark). Color, type, and spacing tokens ensure visual consistency across the system. The design emphasizes state legibility, WCAG accessibility, and semantic clarity, distinguishing Toggle from other patterns (checkbox, radio, button) due to its instant nature.

Anatomy and States

A typical Toggle includes:

- Track: the on-rail area; communicates state using color/contrast.
- Thumb/Handle: circular/oval knob sliding between off/on.
- Label and optional description: provide context; the label area should be clickable.

States:
- Off / On (default)
- Hover / Visible Focus (ring/halo)
- Pressed/Active (momentary feedback)
- Disabled (no interaction, retains legibility)
- Loading (subtle spinner within thumb or track)

Behavior, Proper Use, and Difference vs. Checkbox

- Immediate action: Toggles apply changes instantly; no "save" required.
- Clear binary context: represent persistent/long-lived states (e.g., enable 2FA).
- Not for single-shot actions: prefer Button for momentary triggers.
- Not for multi-select lists: prefer Checkbox for sets of options.
- Focus & keys: Tab to focus, Space/Enter to toggle. Provide clear labeling when on/off meaning isn't obvious.

Switching Between States

A toggle is a user interface element that enables users to switch between two or more states or options. The most common example of a toggle is a switch, which can be turned on or off. This simple interaction allows users to control settings and preferences easily.

Enhancing User Control

Toggles enhance user control by providing a straightforward way to change states. Whether it's enabling or disabling features, switching modes, or selecting options, toggles make these actions intuitive. Their binary nature—on or off, selected or unselected—ensures that users can make changes quickly and confidently.

Versatility in Applications

Toggles are versatile and can be used in various applications, from setting preferences in mobile apps to controlling device settings on websites. They are particularly useful in forms and settings menus where users need to make quick adjustments. Our UI kit includes customizable toggle components that can be easily integrated into any design, ensuring a user-friendly and efficient interface.