So I’ve got a component in react whose purpose is: the user writes a word into an input and presses enter or clicks a link to a go to that word’s definition page.

'use client';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { useState, useRef, useEffect } from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import Link from 'next/link';

function getSearchedWord(word?: string | null) {
    return word ? decodeURIComponent(word) : '';
}

export default function WordForm() {
    const searchedWord = useSelectedLayoutSegment();
    const [word, setWord] = useState(getSearchedWord(searchedWord));
    const linkRef = useRef<HTMLAnchorElement>(null);

    useEffect(() => {
        setWord(getSearchedWord(searchedWord));
    }, [searchedWord]);

    return (
        <nav>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    linkRef.current!.click();
                }}
                className="relative mb-6 h-12"
            >
                <label htmlFor="word-input" className="block h-full">
                    <span className="sr-only">Type a Word</span>
                    <input
                        type="text"
                        value={word}
                        onChange={(e) => {
                            setWord(e.target.value);
                        }}
                        id="word-input"
                        placeholder="Type any word"
                        className="block h-full w-full rounded-lg bg-contrast-lower pl-3 pr-14 text-contrast-high placeholder:text-contrast-normal"
                    />
                </label>
                <Link
                    title='Go to word definition page'
                    ref={linkRef}
                    href={`/${word}`}
                    aria-label="Go to word definition page"
                    className="group absolute bottom-0 right-0 top-0 flex items-center px-4"
                >
                    <FontAwesomeIcon
                        icon={faArrowRight}
                        className="text-contrast-low transition-colors group-hover:text-contrast-high group-focus-visible:text-contrast-high"
                    />
                </Link>
            </form>
        </nav>
    );
}

The thing is that I’m not sure whether it is appropriate to include these controls inside a form or not. I’m not submitting data to the server, the controls are the main navigation of the whole website – by the way, the app is just a dictionary app built with next.js. And that’s the reason I wrapped everything in a nav element. I just want to know if it is appropriate to include these controls inside a form or not.

According to MDN Web Docs:

Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

I’m not sending data to a web server for processing, but I’m updating the interface in some way when the user clicks the link to navigate to a word definition page. But I am still in doubt about whether I should be using a form here.