Date Picker

1.0.0

The date picker is really great!

Structure

  1. Fieldset legend: Legend for fieldset group <legend> See form inputs
  2. Form label and input: Label for each form input <label for>See form inputs
  3. Calendar button: See buttons.
  4. Horizontal spacing: 2 XS See spacing
  5. Vertical spacing: 3 SM See spacing
  6. Calendar picker dropdown: TBD.

Validation

  1. Group label: See form inputs.
  2. Field label and input: See form inputs.
  3. Error message: One error message positioned below form inputs. See form inputs and behaviour.
  4. Stacked positioning: Stacked layout error message sits below form inputs.

Behaviour

  1. The error must not be shown when the user is tabbing between the day, month and year inputs.
  2. Only trigger validation when the user moves focus away from all three inputs. Consider using FocusEvent.relatedTarget./ (see MDN web docs FocusEvent.relatedTarget).

Stacked

  1. Default state: Stacked layout for screen resolution @media screen and (max-width: 258px) only
  2. Error state: Error message sits below the component

Accessibility

  1. Do not hijack the cursor by automatically moving the cursor to the next input. The user must always be in control.
  2. Validation message must specify which field is in error state (eg ‘Please enter a valid day and year’), and must not rely on colour alone to indicate error state.
  3. All form input validation for date picker inherit from form inputs.

References

Type Resource Status
Design RAADS (Figma) TBD