Please refer to the Digital Foundations ↗ documentation for guidelines for accessibility information relating to form fields, including 'form fields with labels ↗' and 'placeholder text ↗'. In addition to those guidelines, the following also apply to form elements in Rivendell:
- Inputs and checkboxes have a border-radius of 2px.
- Inputs, selects and textareas have a 12px left & right padding.
- Inputs, selects and textareas have a 1px border.
- Inputs, selects and textareas are 42px height (44px including border).
- There is 10px margin between a label and input.
- Labels are Aperçu-Medium, with a font-size and line-height of 14px.
- Inputs are Aperçu-Light, with a font-size of 16px.
Guidelines on Color
- Normal state border-color is
- Focus state border-color is
- Disabled state border-color is
- Error state border-color is
- Label color is
- Placeholder text color is
- Inputs with a value text color is
- Disabled state label, value/placeholder and hint text color are all
A optional message under an input. It comes in three states: An instruction, a warning, and disabled. A simple line of text with special instruction (e.g. "Required for security purposes", or "Password must be over 8 characters"). See a spec for a hint message.
- Hint text should use Copy 4 text style.
- An instruction hint text color is
- An error hint text color is
- A hint text color for a disabled form input is
- 5px margin separating hint text from input above it.
For accessibility, it's important to distinguish errors by more than just a change of color. Errors should always be explained using a warning hint message, in addition to the input border color changing to
Margin Between Form Elements
The default margin between form elements is 20px (see above).