# Forms

The rules for the whole form, before any field: ask little, one column, the label in view and the error below the field.

## Rules for the whole form

-   **Ask only what is needed.** Every extra field is work for the person. If you can find it out yourself, do not ask.
-   **One column.** Fields one below the other, in the order the person thinks. Side by side only when they are one thing (hour and minute).
-   **Label always visible**, above the field. Placeholder text never takes its place.
-   **Everything is required**, except what says "(optional)". Marking the optional is shorter than scattering asterisks.
-   **The closer, the more together.** Inside a field, `space-1`; between options in a group, `space-2`; between one field and the next, `space-5`.
-   **The error goes below the field**, with icon and word, and a summary at the top when there is more than one. Below, it does not break a two-column form.
-   **The server always validates.** The error comes back with the filled-in values; nothing the person wrote is lost.
-   **One main button at the end**, saying what happens: "Save reminder". Feedback shows on the form itself.

## A whole form

Reminder nameShows in the notificationWrite a name

When to remind?

Note (optional)

Time format:

Try saving with an empty name: the error shows below the field, and focus goes to it. With a name, feedback shows on the form itself.

## Placeholder text

-   Allowed as a short extra example, under a label that stays: "e.g. Water the plants", "Search tasks".
-   Never instead of the label or the hint: it disappears when the person types, and what it said goes with it.
-   Never with needed information (required format, limits): that goes in the hint, which stays.
-   In the soft text color, which passes the 4.5 contrast.

## Do and don’t

Do

Subject

The label stays visible, and the example only helps.

Don’t

The example instead of the label, with a rule inside: it all disappears when the person types.

Do

Note (optional)

Only the optional field is marked, in words.

Don’t

Name \*

Asterisks on everything, with the key way down below.

Do

NameWrite a name

The error below the field, with icon and word.

Don’t

Invalid fieldName

The error on top, vague, and by color only.

## Writing

-   Label: a short noun or a direct question ("Reminder name", "When to remind?"). No colon at the end.
-   Hint: only if it helps get it right the first time. If every field has a hint, none gets read.
-   Error: what to do, not what is wrong ("Write a name", not "Invalid field").

## Components

-   [Field, TextInput, TimeInput, Select, Checkbox, Radios, Switch](../formulario.html): the pieces.
-   [ErrorMessage and ErrorSummary](../feedback.html): the errors.
-   [Feedback in place](/en/design/retorno/): what happens after Save.