Skip to content
Terra Docs
Blog

Form Fields

Andrés Clua
Andrés Clua
Director of Technology at Terra

This article provides context for both the design and development teams on how we should approach forms moving forward. The goal is to centralize best practices so that all projects follow the same standards.

Form fields should follow the same criteria as filters, ensuring consistency across components.

We have seen inconsistencies in form designs: some with different border thicknesses, others with varying corner radius, and multiple visual styles coexisting within the same project. This creates unnecessary complexity on the development side, since each variation requires additional styles and logic to maintain.

👉 From now on, form fields must follow a unified visual language. Regardless of their function, the base components remain the same. The only acceptable variations are:

  • When the form needs to be displayed at a larger size.
  • When the form is placed on a colored background and requires an alternate style for contrast.

Component Structure

Section titled “Component Structure”
  • Form Group -> only has margin bottom, and the role is to separate between fields
  • Form Label -> Displays informational text for input (not mandatory)
  • Form field -> can be input type text, checkbox, select,radio,etc, they have colors for sucess & error
  • Form Error -> Is only visible & generated via JS, they are usefull when a form field (custom) needs to display custom error messages
[ Form Group ]
[ Label ] Label Name [ Label ]
[ Input/Select/Radio ] Label Name [ /Input/Select/Radio ]
[ Error ] Error Message [ /Error ]
[/Form Group]

Simple Example Form Validation

Section titled “Simple Example Form Validation”

What about layout?

Section titled “What about layout?”

The layout can be adjusted freely, as long as the column system is respected in all cases and existing inline lists are preserved where applicable.

Spinners to the Rescue

Section titled “Spinners to the Rescue”

The c—spinner component will now be part of all our projects. It provides a consistent way to indicate to users that an action is in progress, such as:

  • A search is running
  • A page transition is loading
  • A form is being submitted

In the next example you are going to see spinner in action

From now on this is the structure that we want to implement, since we can take advantage of