Ariakit
/
/
This site is under construction Subscribe to updates

Custom Checkbox

Rendering a visually hidden Checkbox using the VisuallyHidden component to show a custom checkbox presentation in React.

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>
  );
}