import { VisuallyHiddenInput } from "@diceui/visually-hidden-input"
 
export function CustomForm() {
  const [checked, setChecked] = React.useState(false)
  const controlRef = React.useRef(null)
  
  return (
    <form>
      <button 
        ref={controlRef}
        onClick={() => setChecked(!checked)}
        aria-checked={checked}
        role="checkbox"
      >
        {checked ? "✓" : ""}
      </button>
      <VisuallyHiddenInput
        type="checkbox"
        checked={checked}
        control={controlRef.current}
      />
    </form>
  )
}