Switch

Switches are the most efficient way to allow users to toggle individual settings. The MD3 Expressive Switch emphasizes interactivity through fluid thumb motion and responsive state layers.

Introduction

The MD3 Expressive Switch is a binary toggle component designed for immediate actions. It features a tactile thumb that slides across a track, with smooth transitions between on and off states. The expressive nature is highlighted by the thumb's shape-morphing and the fluid ripple effects that accompany each interaction.

Anatomy

• Track: The background surface the thumb moves along.
• Thumb: The circular element that indicates the current state.
• Icons (Optional): Small visual indicators placed inside the thumb for extra context.
• Label (Optional): Descriptive text linked to the switch.
• State Layer: Handles hover and pressed states with a ripple effect.

Variants

Basic Switch

The standard toggle for a single setting.

Labeled Switch

Use the label prop to provide a clickable text description, improving usability and accessibility.

Switch with Icons

You can add icons inside the thumb to visually communicate the "on" and "off" states (e.g., a checkmark and a cross).

Features

Adaptive Thumb Size

The thumb changes its size and appearance based on whether it's selected, pressed, or contains an icon, providing clear visual feedback.

Immediate Feedback

Switches are intended for settings that take effect immediately upon being toggled, without requiring a "Save" or "Submit" action.

Usage

Basic Usage

import { Switch } from "@bug-on/m3-expressive";

const [enabled, setEnabled] = useState(false);

<Switch 
  checked={enabled} 
  onCheckedChange={setEnabled} 
  label="Enable Notifications" 
/>

With Icons

<Switch 
  checked={enabled} 
  onCheckedChange={setEnabled} 
  icons 
  thumbContent={enabled ? <Icon name="check" /> : <Icon name="close" />} 
/>

Best Practices

Do

• Use switches for settings that have an immediate effect.
• Provide a clear label that describes what the switch controls.
• Use standard "on" and "off" states; avoid using a switch for complex multi-state choices.
• Ensure the switch is easily reachable on mobile devices.

Don't

• Don't use a switch if the user needs to press a "Submit" button for the change to take effect (use a Checkbox instead).
• Don't use icons inside the thumb if they are not universally understood.
• Avoid placing too many switches in a single list without grouping them logically.

Accessibility

• Keyboard: Navigate with Tab. Toggle with Space.
• Roles: Correctly implements role="switch".
• States: Communicates state via aria-checked.
• Linking: Automatically links labels to the switch component.

API Reference

Switch