Providing status and labels for complex components / Composed Wrapper

[cooper-joe]

@HendrikThePendric raised an important discussion on slack regarding composed inputs and how we can communicate their status and/or label. We discussed the issue shortly on slack, concluding that I would create a proposal for how to handle these situations. This is the proposal which is very much open for discussion.

Background

Input elements have error states and labels:

These elements can be combined into a more complex component:

However, there is no standard way of handling the status and the label of these organisms. Sometimes it may make sense to use the status of an component within the organism, but sometimes a general "There is something wrong with this component" status is needed:

There are also situations where a label and/or help text would be useful:

It would helpful to have a wrapper that provided these common functions. The label style should be customisable, there are too many different use-cases to define a single style that works everywhere.

The wrapper will not provide any validation, it's only function is as a utility to present the statuses and label. The anatomy of the wrapper is:

Usage Examples

A complex expression builder component displays an error – it cannot be attributed to a specific element so it is only highlighted below:

An organism that consists of a Transfer and checkboxes displays a label, generic error and a specific error:

Three combined input/select fields display a label, help text, generic error and highlights a specific error with the last field:

Questions

• Would we use this component to wrap complex components by default. For example, should the Transfer come wrapped by default to provide states and a label?
• Could the design be more effective? An optional red background color would make the error belong more to the entire organism, rather than the bottom item. For example:
  
  However, doing this would raise issues with margins and padding, so it would be another level of complexity to using this wrapper.