Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Form: Interaction States

InteractionStateMixin saves meta information about interaction states. It allows for creating advanced UX scenarios.

Examples of such scenarios already in our fields:

  • Show the validation message of an input only after the user has blurred the input field
  • Hide the validation message when an invalid value becomes valid

Something our subclassers can implement:

  • Show a red border around the input right after the input became invalid

The meta information that InteractionStateMixin collects, is stored in the Boolean properties on our fields:

  • touched, the user blurred the field.
  • dirty, the value in the field has changed.
  • prefilled, a prepopulated field is not empty.

You can listen to the events touched-changed and dirty-changed.

Advanced use cases

Overriding interaction states

When creating an extension of LionField or LionInput, it can be needed to override the way prefilled values are 'computed'.

The example below shows how this is done for checkboxes/radio-inputs.

/**
 * @override
 */
static _isPrefilled(modelValue) {
  return modelValue.checked;
}

When is feedback shown to the user

We show the validity feedback when one of the following conditions is met:

  • prefilled, the user already filled in something, or the value is prefilled when the form is initially rendered.

  • touched && dirty

    • When a user starts typing for the first time in a field with for instance required validation, error message should not be shown until a field becomes touched (a user leaves(blurs) a field).
    • When a user enters a field without altering the value (making it dirty but not touched), an error message shouldn't be shown either.
  • submitted, if the form is submitted, always show the error message.

Changing the feedback show condition (Subclassers)

You can change the condition upon which feedback gets shown.

In order to override the feedback show conditions, you need to create a custom field and override _showFeedbackConditionFor method. This method accepts the a type parameter which is a String representing the type of feedback (e.g. 'error'). Then, it returns true of false, depending on whether feedback for that type should be shown or not. That part, you can control.

In the following example we will demonstrate this with interaction states, the most common use case for feedback visibility conditions.