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.