How to manage multiple checkboxes with same name

[jorisre]

Hi,
I would like to manage a form with multiple checkboxes with same name but I can't to achieve this.

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();

  console.log(Object.fromEntries(formData), formData.getAll("tags"));

  return null;
};

export default function App() {
  return (
    <Form method="post">
      <input type="checkbox" name="my-input" value="1" />
      <input type="checkbox" name="my-input" value="2" />
      <input type="checkbox" name="my-input" value="3" />
      <input type="checkbox" name="my-input" value="4" />

      <button type="submit" />
    </Form>
  );
}

I tried with different names : my-input[] but nothing worked. I only get the last checked checkbox

Thanks in advance for you help

[kiliman]

You had the right idea, just the wrong name.

formData.getAll("my-input")

NOTE: Object.fromEntries() will only get the last entry as it doesn't handle multiple items.

[jorisre]

It works ! thank you

[berrodriquez26]

this guy is a genius !