CSS only toggle switch not working in ReactJs

Question

I am trying to have a toggle switcher instead of checkboxes on ReactJS using pure CSS. The switch renders as how it should but nothing happens when it is clicked. The switch does not work as it should, but works when used without React.

<div className="switch">
   <input id="toggler-1" className="toggler toggler-round" type="checkbox" />
   <label for="toggler-1"></label>
</div>

.toggler {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.toggler + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.toggler-round + label {
  padding: 2px;
  width: 40px;
  height: 20px;
  background-color: #dddddd;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}
input.toggler-round + label:before, input.toggler-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.toggler-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.toggler-round + label:after {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.toggler-round:checked + label:before {
  background-color: #8ce196;
}
input.toggler-round:checked + label:after {
  margin-left: 60px;
}

I am not sure what is causing this. Is this sort of features not supported in React?

Georgette Pincin · Accepted Answer · 2015-09-03 15:35:32Z

1

As per the react docs:

Since JSX is JavaScript, identifiers such as class and for are discouraged as 
XML attribute names. Instead, React DOM components expect DOM property names 
like className and htmlFor, respectively.

Make sure you are using htmlFor instead of for

<div className="switch">
   <input id="toggler-1" className="toggler toggler-round" type="checkbox" />
   <label htmlFor="toggler-1"></label>
</div>

I tested it in js.fiddle, but the transition length exceeds the button length, which is the case for both the pure html/css case and with react. Yet, the toggle is now working:

fiddle

edited Sep 3, 2015 at 15:35

answered Sep 3, 2015 at 15:29

Georgette Pincin

2923 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS only toggle switch not working in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related