# markusenglund/react-switch

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/markusenglund-react-switch).**

1,340 stars · 100 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/markusenglund/react-switch
- Homepage: https://react-switch.netlify.app/
- awesome-repositories: https://awesome-repositories.com/repository/markusenglund-react-switch.md

## Description

React Switch is an interactive form input element for capturing binary boolean choices in web applications. It functions as a reusable toggle switch component designed to assemble accessible layouts.

The component supports custom styling, embedded icons, and smooth dragging interactions across both mouse and touch screen gestures. Developers can customize dimensions, colors, shadows, border radius, and active states. It also includes options to restrict user interaction and visually dim the presentation.

## Tags

### User Interface & Experience

- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides an interactive form input component for capturing binary boolean choices in web applications. ([source](https://github.com/markusenglund/react-switch/blob/master/README.md))
- [Custom Form Controls](https://awesome-repositories.com/f/user-interface-experience/form-components/custom-form-controls.md) — Provides custom styling and configuration options for form input elements to match specific design requirements.
- [Form Input Controls](https://awesome-repositories.com/f/user-interface-experience/form-input-controls.md) — Serves as an interactive form input element specifically designed for capturing binary boolean choices.
- [Cross-Platform UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-transitions/react-libraries/cross-platform-ui-libraries/cross-platform-ui-component-libraries.md) — Creates accessible user interface elements designed to respond reliably to both mouse clicks and touch gestures.
- [CSS Transform Translations](https://awesome-repositories.com/f/user-interface-experience/css-transform-translations.md) — Applies hardware-accelerated CSS translation styles to animate the switch handle smoothly during dragging interactions.
- [Interface Component Libraries](https://awesome-repositories.com/f/user-interface-experience/interface-component-libraries.md) — Functions as a reusable UI component designed to assemble modern and accessible web application layouts.
- [Cross-Platform Pointer Event Mappers](https://awesome-repositories.com/f/user-interface-experience/pointer-event-handlers/cross-platform-pointer-event-mappers.md) — Unifies mouse and touch screen interactions through normalized pointer event listeners to track drag distance reliably.

### Web Development

- [Controlled Component State](https://awesome-repositories.com/f/web-development/react-state-management/controlled-component-state.md) — Maintains external state synchronization by accepting value props and emitting change notifications for controlled toggle behavior.

### Part of an Awesome List

- [Icon Appearance Customizations](https://awesome-repositories.com/f/awesome-lists/devtools/icon-sets/icon-appearance-customizations.md) — Supports custom dimensions, colors, shadows, border radius, and embedded icons for active and inactive switch states. ([source](https://github.com/markusenglund/react-switch#readme))