This site is under construction Subscribe to updates

Controlled Checkbox

Using controlled props, such as checked and onChange, with a native Checkbox component in React.

I have read and agree to the terms and conditions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useState } from "react";
import { Checkbox } from "ariakit/checkbox";
import "./style.css";

export default function Example() {
  const [checked, setChecked] = useState(true);
  return (
    <label className="label">
      <Checkbox
        className="checkbox"
        checked={checked}
        onChange={(event) => setChecked(event.target.checked)}
      />
      I have read and agree to the terms and conditions
    </label>
  );
}