Custom Input Container

[krotscheck]

Summary

I would like to use my own, custom input controls inside of the existing clarity forms UX.

• What is the change?

Provide an API, controls, containers, or other method by which we can use clarity's normal form layout, with an input type that clarity itself does not support.

• Why should it go in Clarity?

Clarity is opinionated about how helper messages, labels, and error messages are shown, but it cannot cover all possible input type cases.

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

It could impact the internal Forms API in a way that makes it exposable.

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

Depends on the external form control.

Use case

<clr-custom-input-container>
    <label for="customControl">My Label</label>
    <multi-range [min]="0" [max]="100" [step]=".1">
        <multi-range-slider formControlName="lowValue" maxValue="20"></multi-range-slider>
        <multi-range-slider formControlName="highValue" minValue="50"></multi-range-slider>
    </multi-range>
    <clr-control-helper>Please choose a low and a high value on the slider above.</clr-control-helper>
    <clr-control-error *clrIfError="'maxValue'">Some error message</clr-control-helper>
    <clr-control-error *clrIfError="'minValue'">Some other error message</clr-control-helper>
</clr-custom-input-container>

Examples

The Price slider from AirBnB.

Workarounds

Clone the entire forms codebase and provide a custom wrapper implementation for each custom form control.

[krotscheck]

[gnomeontherun]

I think this is a duplicate of #2886, so I'm going to close it in favor of #2886. Please follow it for more details. It is something on our radar in the near future.

[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.