{"id":11876,"library":"react-switch","title":"React Switch Component","description":"react-switch is a lightweight, customizable, and accessible toggle-switch component for React applications. Currently at version 7.1.0, it provides a draggable switch with sensible default styling that uses inline styles, eliminating the need for separate CSS imports. Key differentiators include its small bundle size (<2.5 kB gzipped), built-in accessibility features (with guidance on proper label usage), and high customizability for visual appearance. The library is actively maintained, though a specific release cadence isn't published. It supports a wide range of React versions, from 15.3.0 up to 19.0.0, as specified in its peer dependencies, making it compatible with both older and very recent React projects.","status":"active","version":"7.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/markusenglund/react-switch","tags":["javascript","switch","toggle","toggle-button","toggle-switch","checkbox","react","react-component","typescript"],"install":[{"cmd":"npm install react-switch","lang":"bash","label":"npm"},{"cmd":"yarn add react-switch","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-switch","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component to function.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is exported as a default export.","wrong":"import { Switch } from 'react-switch';","symbol":"Switch","correct":"import Switch from 'react-switch';"},{"note":"Type definition for component props, for TypeScript users.","symbol":"SwitchProps","correct":"import type { SwitchProps } from 'react-switch';"},{"note":"CommonJS import for older Node.js environments or build systems.","symbol":"CommonJS require","correct":"const Switch = require('react-switch');"}],"quickstart":{"code":"import React, { Component } from \"react\";\nimport Switch from \"react-switch\";\n\nclass SwitchExample extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { checked: false };\n    this.handleChange = this.handleChange.bind(this);\n  }\n\n  handleChange(checked) {\n    this.setState({ checked });\n  }\n\n  render() {\n    return (\n      <label htmlFor=\"my-switch\">\n        <span>Toggle Feature</span>\n        <Switch\n          id=\"my-switch\"\n          onChange={this.handleChange}\n          checked={this.state.checked}\n          offColor=\"#ccc\"\n          onColor=\"#88b\"\n          height={24}\n          width={48}\n          handleDiameter={20}\n          aria-label=\"Toggle feature on or off\"\n        />\n      </label>\n    );\n  }\n}\n\nexport default SwitchExample;\n","lang":"javascript","description":"Demonstrates a basic controlled `Switch` component within a `label` for accessibility, handling state changes and customizable appearance."},"warnings":[{"fix":"Ensure both `checked={this.state.someBoolean}` and `onChange={this.handleChange}` are passed to the `Switch` component, where `handleChange` updates the state tied to `checked`.","message":"The `checked` and `onChange` props are both required for the `Switch` component to function as a controlled input. Omitting either will result in errors or unexpected behavior where the switch does not update or is read-only.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap the `Switch` component and its descriptive text in a `<label>` element, or explicitly link them using `htmlFor`/`id` or `aria-label`/`aria-labelledby`.","message":"For proper accessibility, especially for screen reader users, the `Switch` component should be associated with a descriptive label. Nesting the switch within a `<label>` tag is the easiest method. Alternatively, use `htmlFor` with a matching `id`, or `aria-labelledby`/`aria-label` props on the `Switch`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify that your `react` and `react-dom` versions satisfy the peer dependency requirements of `react-switch`. Update React or use an older `react-switch` version if necessary.","message":"While the core API for `react-switch` remains largely stable, always review peer dependency updates in major versions. For example, `react-switch` v7 broadened its `react` and `react-dom` peer dependency to include `^19.0.0`, while maintaining compatibility with older React versions down to `^15.3.0`. Developers using older React versions might need to manage their `react` peer dependency to ensure compatibility with other libraries.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Provide a boolean value for the `checked` prop, typically from component state: `checked={this.state.isChecked}`.","cause":"The `checked` prop was not provided or was `undefined` when the `Switch` component rendered.","error":"Warning: Failed prop type: The prop `checked` is marked as required in `Switch`, but its value is `undefined`."},{"fix":"Add an `onChange` handler to the `Switch` component that updates the state controlling the `checked` prop: `onChange={this.handleChange}`.","cause":"A `Switch` component was rendered as a controlled component (with `checked` prop) but lacked an `onChange` handler to update its state.","error":"Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`."},{"fix":"Wrap the `Switch` and its descriptive text within a `<label>` tag or use `htmlFor` and `id` attributes to link them, or `aria-label`/`aria-labelledby` props on the `Switch` itself.","cause":"The `Switch` component is not properly associated with a descriptive label for assistive technologies.","error":"Screen reader only announces 'switch off' without context."}],"ecosystem":"npm"}