Forms

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.
Some error message

Form error

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

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.