Form component and method in Remix

Introduction

Forms let users send information to your app. Remix makes it easy to handle forms and their data.

When you want users to submit data like login info or comments.

When you need to send data to the server without writing extra JavaScript.

When you want to handle form submissions with server-side logic in Remix.

When you want to keep your app fast and simple by using Remix's built-in form handling.

Syntax

Remix

import { Form } from '@remix-run/react';

<Form method="post" action="/some-action">
  <input type="text" name="username" />
  <button type="submit">Send</button>
</Form>

The Form component replaces the regular HTML <form> tag in Remix.

The method attribute tells Remix how to send data (usually "post" or "get").

Examples

A simple form that sends email data using POST method.

Remix

<Form method="post">
  <input name="email" type="email" />
  <button type="submit">Submit</button>
</Form>

A form that sends data via GET to the /search route.

Remix

<Form method="get" action="/search">
  <input name="query" type="search" />
  <button type="submit">Search</button>
</Form>

Form to add a comment, handled by the current route's action function.

Remix

<Form method="post">
  <input name="comment" />
  <button type="submit">Add Comment</button>
</Form>

Sample Program

This form asks for a name. When submitted, the server checks if the name is given. If not, it shows an error. If yes, it greets the user by name.

It uses Remix's Form component and action function to handle submission.

Remix

import { Form, useActionData } from '@remix-run/react';
import { json } from '@remix-run/node';

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  if (!name) {
    return json({ error: 'Name is required' });
  }
  return json({ message: `Hello, ${name}!` });
}

export default function GreetingForm() {
  const actionData = useActionData();

  return (
    <div>
      <Form method="post">
        <label htmlFor="name">Name:</label>
        <input id="name" name="name" type="text" aria-required="true" />
        <button type="submit">Greet Me</button>
      </Form>
      {actionData?.error && <p role="alert" style={{ color: 'red' }}>{actionData.error}</p>}
      {actionData?.message && <p>{actionData.message}</p>}
    </div>
  );
}

Important Notes

Always add name attributes to inputs so Remix can read their values.

Use useActionData() to get data returned from your action function after form submission.

Remember to add accessibility features like aria-required and labels for better user experience.

Summary

Use Remix's Form component to create forms that send data to server actions.

The method attribute controls how data is sent (POST or GET).

Handle form data in the action function and show feedback using useActionData().