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.