bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Toggle

Toggles are switches that allow users to turn an option on or off instantly.

When to use

Use toggles for binary settings that take effect immediately without requiring a submit action.

Settings and Preferences

Enable or disable features like notifications, dark mode, or auto-save.

Feature Toggles

Turn features or functionality on or off with immediate effect.

Status Changes

Switch between two mutually exclusive states like Active/Inactive or Public/Private.

Visibility Controls

Show or hide content sections, panels, or UI elements.

When not to use

  • For multiple selection options—use checkboxes instead
  • When the change requires confirmation—use a checkbox with a confirm button
  • For actions that aren't immediate—use a button instead
  • When the on/off states aren't clear—use radio buttons with labels

Examples

Interact with live examples and copy the code to use in your project.

Basic Toggle

Simple on/off switch for binary settings

chevron_right HTML 
<bh-toggle label="Enable notifications"></bh-toggle>
<bh-toggle label="Dark mode" checked></bh-toggle>
chevron_right React 
import { BhToggle } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      
      
    
  );
}
chevron_right Angular 
<bh-toggle label="Enable notifications"></bh-toggle>
<bh-toggle label="Dark mode" checked></bh-toggle>

Toggle with Description

Add helper text to provide additional context

chevron_right HTML 
<bh-toggle label="Auto-save" description="Automatically save your work every 5 minutes"></bh-toggle>
<bh-toggle label="Email notifications" description="Receive email updates about your account activity" checked></bh-toggle>
chevron_right React 
import { BhToggle } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      
      
    
  );
}
chevron_right Angular 
<bh-toggle label="Auto-save" description="Automatically save your work every 5 minutes"></bh-toggle>
<bh-toggle label="Email notifications" description="Receive email updates about your account activity" checked></bh-toggle>

Anatomy

Toggles consist of a track, thumb, and optional label text.

  1. Track

    Background container that changes color based on toggle state

  2. Thumb

    Circular indicator that slides between on and off positions

  3. Label (Optional)

    Text describing what the toggle controls

  4. Helper Text (Optional)

    Additional descriptive text below the label

Types

Toggles come in different sizes and states to fit various design contexts.

Sizes

Multiple size options from small to large for different use cases and visual hierarchies.

States

On, off, disabled, and focus states with clear visual differentiation.

With Labels

Toggles with accompanying label text for clarity and accessibility.

Interaction

Toggles respond immediately to clicks or keyboard input with smooth animations.

Click to Toggle

Clicking the toggle switches it between on and off states with animated thumb movement.

Keyboard Control

Space key toggles the state when the toggle has keyboard focus.

Immediate Effect

Changes take effect instantly without requiring a save or submit action.

Disabled State

Disabled toggles show reduced opacity and don't respond to interaction.

Placement

Toggles are commonly used in settings panels, preference screens, and feature controls.

Settings Panels

Place in settings screens for user preferences and configuration options.

Feature Controls

Use in toolbars or panels to enable or disable features on the fly.

List Items

Include in list items to control per-item settings or visibility.

Forms

Use in forms for binary choices that don't require submission to take effect.

Accessibility

Toggles follow ARIA switch pattern for full keyboard accessibility and screen reader support.

Keyboard Support

  • Tab: Move focus to the toggle
  • Space: Toggle between on and off states
  • Enter key can also toggle if implemented

ARIA Attributes

  • role="switch": Identifies the toggle as a switch control
  • aria-checked: Indicates current on/off state
  • aria-disabled: Marks disabled toggles
  • aria-label/aria-labelledby: Associates label text with toggle

Screen Reader Support

  • Toggle state is announced as "on" or "off"
  • Label text is read with the toggle control
  • State changes are announced when toggle is activated
  • Disabled state is communicated to users

Visual Design

  • Clear focus indicators when toggle has keyboard focus
  • Sufficient color contrast between states
  • Visual state change is not dependent on color alone
  • Large enough touch target for mobile devices (minimum 44x44px)

Resources

Design and development resources for the Toggle component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →