Elements

• Label
• Form element
• Error message

Spacing

Vertically aligned form elements

• Use space xsmall (0.25rem|4px) between the label and the form element.
• Use space medium (1rem|16px) between each fieldset.
• Use space large (1.5rem|24px) between the last fieldset and the form actions.

Horizontally aligned form elements

• Use space small (0.5rem|8px) between the the form element and the label.
• Use space large (1.5rem|24px) between the last fieldset and the form actions.

Error states

Inline error

• Place the error message under the form element.
• For the error message use a text with medium size and the color red from the palette.
• Use space xsmall (0.25rem|4px) between the form element and the error text.

Form error

• Place the error message under the form actions.
• Use space medium (1rem|16px) between the form actions and the error message.

Interaction

• After saving the user will see the notification component with a success message.
• Once the form element value is changed the error should disappear.

Related components

• FormField
• TextInput
• Button