Custom Checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useState } from "react";
import { Checkbox, CheckboxCheck, useCheckboxState } from "ariakit/checkbox";
import { VisuallyHidden } from "ariakit/visually-hidden";
import "./style.css";

export default function Example() {
  const checkbox = useCheckboxState<boolean>();
  const [focusVisible, setFocusVisible] = useState(false);
  return (
    <label className="label">
      <VisuallyHidden>
        <Checkbox
          state={checkbox}
          onFocusVisible={() => setFocusVisible(true)}
          onBlur={() => setFocusVisible(false)}
        />
      </VisuallyHidden>
      <div className="checkbox" data-focus-visible={focusVisible ? "" : null}>
        <CheckboxCheck checked={checkbox.value} />
      </div>
      I have read and agree to the terms and conditions
    </label>
  );
}