Toggle

Toggle switches are often used for settings or to show and hide UI. They utilize a slide animation to indicate switching between two opposing options.

Overview

Resources

Install

yarn add @camp/toggle

Upgrading to Next Gen

🎨 Updated Color Palette & Style Refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🚀 Easier interface: Now separate from Checkbox and built using the switch  role, Toggle is now more approachable and easier to implement.

Migration steps

1. Update import path: Replace the old Toggle/Checkbox imports with Toggle from @camp/toggle.
2. Update prop values

• value: No more value prop since the value is always either on/off.
• onClick: The Toggle is now a button under the hood, so the onClick prop can be used instead of onChange to handle the switch event.

Variations

Accessibility

Aria-label

• If a label is not provided, the aria-label prop is required to describe the Toggle.

Keyboard support

• Unless disabled, the user can tab into the Toggle and use the space or enter key to toggle the switch.