Form

Wrap your fields to submit user data and enable input validation.

The <Form> component acts as a container for a set of fields, enabling data transmission to a server. It operates like a standard HTML form, initiating either a request based on the specified method attribute.

Additionally, the <Form> allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the Validation guide to learn more about form validation.

Usage

Import

To import the component you just have to use this code below.

import { Form } from '@marigold/components';

Appearance

Sorry! There are currently no variants and sizes available.

Props

PropertyTypeDefaultDescription
validationErrorsRecord<string, string | string[]>-Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.
actionstring | FormHTMLAttributes<HTMLFormElement>['action']-Endpoint where to send the form-data when the form is submitted.
method'get' | 'post' | 'dialog'-The HTTP method to submit the form with.
onSubmit(event: FormEvent<HTMLFormElement>) => void-Triggered when a user submits the form.
onReset(event: FormEvent<HTMLFormElement>) => void-Triggered when a user resets the form.
onInvalid(event: FormEvent<HTMLFormElement>) => void-Triggered for each invalid field when a user submits the form.
...-Yes you can use all regular attributes of `form`!

Examples

Setup

This is a simple setup how to use a <Form>.

Handling submission

The onSubmit event is useful for custom form actions, such as calling a REST API, instead of relying on the native form submission. It triggeres when a user submits the form using the Enter key or clicks the submit button. The onReset event is triggered when a user presses a reset button ([type=reset]).

Server Errors

The <Form> component handles passed errors, typically received from a server after form submission. To display validation errors, set the validationErrors prop as an object mapping each field's name prop to a string or array of strings representing errors. These errors appear to the user as soon as the validationErrors prop is set and are cleared when the user modifies the corresponding field's value.

Incorrect password.

For more information about form validation, see the Validation guide.

Focus Management

As you can see in the previous server errors example, when a user submits a form with validation errors, the first invalid field is automatically focused. This behavior can be customized using e.preventDefault during the onInvalid event and manage the focus manually.

Want more?!

You can find more examples and usages of the <Form> component on the Validation page and in the Forms recipes.