React-React toggle v2.1.1: Elegant, accessible toggle component for React. Also a glorified checkbox.

icon
Latest Release: v2.1.1

An elegant, accessible toggle component for React. Also a glorified checkbox.

See usage and examples.

Props

The component takes the following props.

Prop Type Description
checked boolean If true, the toggle is checked. If false, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component
defaultChecked boolean If true on initial render, the toggle is checked. If false on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component
onChange function Callback function to invoke when the user clicks on the toggle. The function signature should be the following: function(e) { }. To get the current checked status from the event, use e.target.checked.
onFocus function Callback function to invoke when field has focus. The function signature should be the following: function(e) { }
onBlur function Callback function to invoke when field loses focus. The function signature should be the following: function(e) { }
name string The value of the name attribute of the wrapped <input> element
value string The value of the value attribute of the wrapped <input> element
id string The value of the id attribute of the wrapped <input> element
icons object If false, no icons are displayed. You may also pass custom icon components in icons={{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}}
aria-labelledby string The value of the aria-labelledby attribute of the wrapped <input> element
aria-label string The value of the aria-label attribute of the wrapped <input> element
disabled boolean If true, the toggle is disabled. If false, the toggle is enabled

Installation

npm install react-toggle

Usage

If you want the default styling, include the component's CSS with

import "react-toggle/style.css" // for ES6 modules
// or
require("react-toggle/style.css") // for CommonJS

Development

npm install
npm run dev

Build

npm run build

License

MIT

Comments

  • Bump is-my-json-valid from 2.16.1 to 2.20.5
    Bump is-my-json-valid from 2.16.1 to 2.20.5

    Mar 12, 2021

    Bumps is-my-json-valid from 2.16.1 to 2.20.5.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Is there any way to easily control the size of the toggle?
    Is there any way to easily control the size of the toggle?

    Apr 21, 2021

    I think that controlling the size of the toggle is a common use case (in my case, I want it about 25% smaller), but I can't see any way to adjust it. Am I missing something?

    Reply
  • Add data-test pass-through prop
    Add data-test pass-through prop

    May 8, 2021

    When writing tests it is common to assign a data-test attribute to the DOM node to be able to target it in your tests. It is not possible to pass this to the component. Please could you add this?

    Reply
  • Adds label property to improve accessibility
    Adds label property to improve accessibility

    Jun 1, 2021

    the label property is used by screen readers, a configurable label would improve the right characterization of the toggle.

    Reply
  • Release3
    Release3

    Dec 24, 2021

    null

                                                                                                                                                                                                           
    Reply
  • desable fixed
    desable fixed

    Dec 24, 2021

    referencing #164 we had a problem in the state changing also I added an example for demmonstration

    Reply
  • New release
    New release

    Apr 18, 2017

    Would be great if you could release the latest changes to make sure that react-toggle is compatible with React 16. Thanks!

    Reply
  • Remove the switch SVG title tags
    Remove the switch SVG title tags

    Jul 29, 2019

    These SVG titles are announced by VoiceOver on Safari, but are meaningless to screenreader users, and invisible to sighted users

    Reply
  • CSS is not loaded
    CSS is not loaded

    May 30, 2016

    image

    weird Styling of components

    Reply
  • Looking for collaborators
    Looking for collaborators

    Aug 10, 2016

    Anyone interested?

                                                                                                                                                                                                           
    Reply
  • update to componentDidUpdate instead of will receive props
    update to componentDidUpdate instead of will receive props

    Aug 22, 2019

    removed deprecated willReceiveProps and switched to didUpdate

    ran prettier.

    Reply
  • Cannot read property 'focus' of undefined
    Cannot read property 'focus' of undefined

    Nov 6, 2015

    Hi just implementing react-toggle, with ES6 - import Toggle from 'react-toggle' and getting a error -- Cannot read property 'focus' of undefined -- appears for checkbox.focus() so looks like it can't find this.refs.input

    Wondering what I am doing wrong. I basically just added on the view without passing anything.

    Reply