React Custom input checkbox

akileus answered on February 5, 2023 Popularity 8/10 Helpfulness 3/10

answer React Custom input checkbox

React Custom input checkbox

Comment

import "./styles.css";
import { useState } from "react";

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <label>
      <input
        type="checkbox"
        onChange={() => {
          setIsChecked(!isChecked);
        }}
      />
      <svg
        className={`checkbox ${isChecked ? "checkbox--active" : ""}`}
        aria-hidden="true"
        viewBox="0 0 15 11"
        fill="none"
      >
        <path
          d="M1 4.5L5 9L14 1"
          strokeWidth="2"
          stroke={isChecked ? "#fff" : "none"}
        />
      </svg>
      Don't you dare to check me!
    </label>
  );
}

export default Checkbox;

Popularity 8/10 Helpfulness 3/10 Language typescript

Source: Grepper

Tags: checkbox input typescript

Link to this answer
Share Copy Link

Contributed on Feb 05 2023

akileus

0 Answers Avg Quality 2/10

React Custom input checkbox

Contents

More Related Answers

React Custom input checkbox

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.