UI Components

Toggle

Toggles are interactive UI controls used to switch a setting, feature, or system state between two opposing options. They allow users to make quick, binary decisions and immediately understand whether a function is active or inactive. Toggles provide clear visual feedback and are optimized for settings screens, preferences, feature controls, and any interface that requires fast on/off interaction.

States

The Toggle component supports four visual and functional states: ON, OFF, ON Disabled, and OFF Disabled.

1. ON (Active)

Indicates that the setting or feature is currently active. The switch thumb is positioned to the right. The track uses the component's active color (#343498). Fully interactive and provides immediate feedback on press.

Automatically save your work every 5 minutes

2. OFF (Inactive)

Indicates that the feature is currently inactive. The thumb is positioned to the left. The track uses a neutral color (#BCC2C8). Fully interactive and ready to be switched on.

Automatically save your work every 5 minutes

3. ON — Disabled

Represents an active state that cannot be changed by the user. Toggle remains visually in the ON position. Uses muted colors (#F0EAFA). Does not react to hover, press, or focus interactions. Communicates that the system or user permissions prevent editing.

Upgrade to enable this feature

4. OFF — Disabled

Represents an inactive state that is locked from interaction. Toggle remains visually in the OFF position. Uses muted colors (#F4F5F6 with border #E9EBED). Non-interactive and does not respond to user actions. Indicates unavailable or restricted functionality.

This setting is not available in your plan

Usage Examples

Common use cases for the Toggle component in real-world applications.

Settings Panel

Push Notifications

Receive push notifications on your device

Email Alerts

Get notified via email for important updates

Dark Mode

Switch to dark theme

Auto-save

Automatically save your work

Feature Toggles

Get detailed insights and reports
Access experimental features (may be unstable)
Available in Pro plan only

Standalone Toggles

Toggles without labels, useful for compact layouts or when labels are provided elsewhere.

Toggles with ON/OFF Text

Toggles with text labels inside showing "ON" or "OFF" state. Useful when you need extra clarity about the current state.

Upgrade to enable

Styling Details

Toggle follows precise design specifications from the design system.

Dimensions

  • Width: 44px (w-11)
  • Height: 24px (h-6)
  • Border radius: 12px (rounded-xl)

ON State

  • Background: #343498 (brand-1)
  • Border: #343498 (brand-1) 2px
  • Padding: 2px all sides
  • Thumb: 20x20px, positioned on the right

OFF State

  • Background: #BCC2C8 (gray-400)
  • No border
  • Padding: 2px top/bottom, 4px left/right
  • Thumb: 15x15px, positioned on the left

Disabled States

  • ON Disabled: Background #F0EAFA (violet-100), no border
  • OFF Disabled: Background #F4F5F6 (gray-100), border #E9EBED (gray-200) 1px

Behavior & Interaction Principles

  • ✓ Toggles change state immediately when activated (no confirmation dialogs unless required by the feature)
  • ✓ They provide clear visual motion between states through the thumb sliding animation
  • ✓ Touch-friendly target size ensures usability on mobile devices
  • ✓ State changes should be reversible unless explicitly defined otherwise by the system logic
  • ✓ Keyboard accessible: Space or Enter to toggle
  • ✓ Focus indicators are visible for keyboard navigation

Usage Guidelines

  • ✓ Use toggles for binary settings only — features that are either fully ON or OFF
  • ✓ Avoid using toggles for actions that cause irreversible effects or trigger complex workflows
  • ✓ Always place a descriptive label next to the toggle to clarify the setting
  • ✓ Use disabled states to communicate unavailable or system-controlled settings
  • ✓ Maintain consistent spacing and alignment across settings lists or forms
  • ✗ Don't use toggles for multiple choice selections (use radio buttons or checkboxes instead)
  • ✗ Don't use toggles for actions that require confirmation (use buttons instead)

Accessibility

The Toggle component is built on Radix UI primitives, ensuring full accessibility support.

  • ✓ Keyboard navigation: Space or Enter to toggle state
  • ✓ ARIA attributes: Proper roles, states, and properties for screen readers
  • ✓ Focus management: Visible focus indicators and logical tab order
  • ✓ Screen reader support: Announces current state (checked/unchecked) and label
  • ✓ Semantic HTML: Uses proper switch role and landmarks