taga11y — react-hook-form

The <Taga11yInput> component from taga11y/react dropped into a react-hook-form <Controller> via {...field}. Peer dependencies: React 19, react-hook-form 7.

Because onChange is value-first and ref resolves to the underlying <input>, spreading {...field} wires the value channel and gives react-hook-form the node it needs for focus-on-validation-error. Submit to see the value the form captured.

View code

import { useForm, Controller } from 'react-hook-form';
import { Taga11yInput } from 'taga11y/react';
import 'taga11y/dist/taga11y.css';

function TagsField() {
  const { control, handleSubmit } = useForm({ defaultValues: { tags: ['JavaScript'] } });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        name="tags"
        control={control}
        render={({ field }) => (
          <Taga11yInput {...field} suggestions={['JavaScript', 'TypeScript', 'Rust']} />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}