import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Revas Platform Guide|Data Input" />


# Forms

Forms allow for user input by mimicking paper forms where users fill in information into particular fields and submit it to the system.

### Usage

Forms can be employed to:

- Make the user insert data in a structured way
- Edit singular data items of an item

### Layout

Form elements **should move in a single direction** so they should only be distributed through one column when the progression of the form is vertical and through one row when the progression is horizontal.

**Input layout**

The label and the input are on the same row, the input on the right and the label on the left. Informative messages (such as errors) are displayed under the input and, if necessary, a question mark icon under the label can be hovered to display descriptive text.
At the right side of the input, an icon can be displayed to show further information on the status of the input.

**Validation** of an input is triggered when the focus is removed from the input. If the users is filling the form and wants to exit without filling completely, a quick action modal (see Quick Action Modal) is shown asking for confirmation, warning that data will be lost.

**Conceptual sections**

Inputs that have a common theme are grouped in separate sections. These sections have a title.

**Tabs**

When some sections are secondary or not important, they can be put inside secondary or tertiary pages that are accessible through a tab navigation.

**Mandatory fields**

Mandatory fields are signaled with an asterisk and a descriptive small text about the presence of mandatory fields is used at the bottom of the form.

**Filling the form**

When mandatory fields are not completed, the main action (Save) is disabled and an informative text is displayed on the hover of the action.

**Displaying the form data**

When in display mode, the data flow follows the same order of the inputs, tabs included.

### Do's

You can add actions that perform on the single input, such as deleting the single input. In that case, the action is on the same row of the input. You can add secondary actions at the bottom of the form, such as adding new inputs.

For particular data, the display is a little bit different from the input layout, keeping the same position. For example, the input for the profile picture.

### Dont's

Do not display data in a different flow than the flow of the input, in order to help user scan data and remember the pattern. Do not add primary actions on the form that perform on the whole form.