Building Forms

Marigold Form Components

Form components are individual elements that make up a form, such as text fields, checkboxes, radio buttons, select fields, text areas and buttons. They allow user input, selection and actions.

Marigold has a set of form components that you can use to build your form.

• Autocomplete
• Button
• Checkbox
• NumberField
• Radio
• Select
• Slider
• Switch
• TextArea
• TextField

How to layout a form?

A form layout should be structured in a logical and easy-to-understand manner. This typically includes grouping related fields together, using clear and concise labels for each field, and providing clear instructions for filling out the form. Additionally, it is important to consider the overall layout of the form, including the use of white space and the placement of buttons and other elements. Accessibility best practices should be followed, such as providing clear, descriptive labels and ensuring that form fields are appropriately labeled and structured for screen readers.

Here you can see how to layout a classic form with Marigold's <TextField> and <Select> components.

If you want to see more examples of forms with Marigold, check out our recipes: Marigold Form Recipes

Controlled or uncontrolled Components?

In React, there are two main types of form components: controlled and uncontrolled. Controlled components are controlled via React state (e.g. useState). Any changes to the value will update the state variable. This happens when the user interacts with a component and an event handler is called, onChange for example. Uncontrolled components don't use any state to update. You can use props like defaultValue or defaultChecked to set their initial value.

When the state or props change, React will automatically re-render the component with its new data. This is called data-binding. Components recive data from its parents component and update their output in response to changes in that data by using state and props, this allows to have a dynamic and reactive user interface.

Interactive Forms

Interactve forms can have several features like error validation, real-time feedback (password-stregth indicator), logic (hide fields if a several field is checked etc.) or autocomplete. All these features help to make interactive fields more user friendly and more efficient.

Error Handling

Marigold's form components comes with the error prop. You can use it to show or hide the error message (errorMessage). If no error is present the field will display a help text (description), if given, instead.

In this example below you can have an example on how to check if the E-Mail adress is correctly filled. Try out and type something!

Logical Interaction

You can have interactive forms which contains logical aspects. In this example you can interact with the <Select> and a new component <Checkbox> will appear. You can try out and switch the value of the select field.

Submitting a form

In this example you can see how a form with all its fields can be submitted. The submitted data will be displayed in an alert message.

For validating the form we are using zod. It is a library for building schemas, which can be used to validate inputs. It is especially useful when you have more complex validation rules.

Handling complex forms and form state

You can simplify form handling in your React components and avoid repetitive tasks such as manually updating the form state, validating user inputs, and handling form submissions. We decided to use react-form-hook for this because its reducing re-renders caused by state updates, you don't have much to configure and supports integrating UI libraries. For the later we use the <Controller> component from react-hook-form, which must be wrapped around each Marigold component that should submits data.

In the formular we have used <TextField>, <Select> and <Checkbox> components. These components are wrapped around with the <Controller> component from react-hook-form. The <Controller> component acts as a bridge between the form element and the react-hook-form state management. It updates the react-hook-form state whenever the value of the form element changes.

How to do validation and error signaling

Some fields are required and throw error messages if you don't fill them out. For this to work, react-hook-form has a property formState, which contains the boolean isValid. This prop is set to true if the form doesn't have errors. isValid will always observe the entire form to validate.

We don't explicit need to use a onChange event, instead of using useState and set a value we used directly defaultValue. With that the component is a uncontrolled component, it never gets undefined or null.

There are rules that can be applied on the components to trigger the validation, e.g. required: true. Our Marigold form components already have error properties and error messages build in. Now it should be combined. In the handleSubmit function we check if the recived data is valid, if that isn't the case we give the error value to the component and display the error message.