Custom form component base

[sdurnov]

Summary

While using Clarity to develop forms, I found a pattern, which may deserve to be implemented as a form component, or to be a documented workaround or so.

Often, there is a need to put form component in a modal. It is useful for multiple selection, situations, when you need some rich custom UI to produce resulting value for a form field, etc.

In this case, what you want to display on a form - is a form label, like we have for all stock form elements, and a button instead of input/select/textarea, which will open modal.
Plus, I often put label + produced value below this construction.
And, finally, we may also want to display standard Clarity form field validation error.

• What is the change?

New type of a form component, without direct input element, where you can put something else (non-input element) instead of input/select/textarea element and get a proper layout and support for helper/validation messages

• Why should it go in Clarity?

If one day you add form-level or global form grid layout settings, it will help to incorporate custom form elements under the umbrella of a common form settings.
Plus, such cases may document obvious and straightforward implementation for such use cases.

• Does this change impact existing behaviors? If so how?

It doesn't

• If this change introduces a new behavior, is this behavior accessible?

Not sure

Use case

Our most common use case is a multiple selection in a modal. Not just because Clarity lacks multiselect component - in many cases multiselect component may not be comfortable and modal will still win in usability.

Examples

Multiselect in a modal, with displaying resulting value

No value selected:

Displaying selected values:

Field with input, which is being displayed on demand

Initial state:

After requesting change:

We currently don't have examples with the validation, but it shouldn't be hard to imagine helper text and validation message placement.

Workarounds

Currently, we take layout for css input element and put something we want instead of an input field.

<h4>Tenant and Utilities</h4>
    <div class="clr-form-control clr-row">
      <label
        class="clr-col-12 clr-col-sm-4 clr-col-md-12 clr-col-lg-5 clr-col-xl-5 clr-control-label">Tenant</label>
      <div
        class="clr-control-container clr-col-12 clr-col-sm-8 clr-col-md-12 clr-col-lg-7 clr-col-xl-7 editor-field">
        <div class="clr-input-wrapper">
          <button type="button" class="btn btn-sm"
            (click)="showTenantsModal = true" [disabled]="!editing">Select
            Tenants</button>
        </div>
      </div>
    </div>
    <clr-modal [(clrModalOpen)]="showTenantsModal" [clrModalSize]="'sm'">
      <h3 class="modal-title">Select Tenants</h3>
      <div class="modal-body">
        <clr-checkbox-container clrInline>
          <clr-checkbox-wrapper *ngFor="let tenant of tenants">
            <input type="checkbox" clrCheckbox
              (change)="toggleTenantsSelected(tenant)"
              [ngModel]="isTenantSelected(tenant)" />
            <label>{{tenant.fullName}}</label>
          </clr-checkbox-wrapper>
        </clr-checkbox-container>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary"
          (click)="showTenantsModal = false">Ok</button>
      </div>
    </clr-modal>
    <div class="clr-form-control clr-row">
      <label
        class="clr-col-12 clr-col-sm-4 clr-col-md-12 clr-col-lg-5 clr-col-xl-5 clr-control-label">Selected
        Tenants</label>
      <div
        class="clr-control-container clr-col-12 clr-col-sm-8 clr-col-md-12 clr-col-lg-7 clr-col-xl-7 editor-field">
        <div class="clr-input-wrapper dialog-selection-result">
          <span *ngIf="selectedTenants?.length == 0">No tenants selected.</span>
          <span class="label" title="tenant.fullName"
            *ngFor="let tenant of selectedTenants">
            <span>{{tenant.fullName}}</span>
          </span>
        </div>
      </div>
    </div>

[dorthrithil]

This is probably related to #2886

[gnomeontherun]

Yes, this is a duplicate of #2886, but has some useful input to bring into the discussion. I have already done some work on this, but it hasn't been finalized. The challenge is coming up with a pattern that works well for everybody, but some cases might require manual validation (due to not knowing how everybody integrates with built-in validation).

[sdurnov]

@gnomeontherun in minimal implementation, it should just generate proper markup, similar to what I put into a workaround example. As for validation - it is pretty straightforward. In ugliest template forms implementation, you might generate some hidden input element, if the real field is hidden inside a modal. In case of a reactive forms, control may reflect validation state of a provided form group.

[gnomeontherun]

I'm going to go ahead and close this as a duplicate since its linked to the actual ticket. There has been some work but I don't have an expected delivery at this stage. Trying to consolidate tickets to help us keep our board focused.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.