Clarity: Request <clr-control-succes> for input

[Ergnos]

Summary

Clarity allows to apply an error state <clr-control-error></clr-control-error> after form validation. In certain circumstances it would be nice to have a standardized 'succes' <clr-control-succes></clr-control-succes> status for the validated input field.

Use case

In our current application we use a modal in which different kind of barcodes can be scanned, After input of a barcode string the form will be validated; when successful the modal will be closed and the current 'route' is changed after a time-out. When the barcode format is unknown, the clr-control-error will be set until the input is adjusted. Since the modal is closed by the application the user should be sure that the input is valid.

Additionally it can be a useful feature when a form with lots of inputs needs to be evaluated.

Examples

<clr-control-error></clr-control-error>

<clr-control-success></clr-control-success>

Workarounds

Not investigated

[Kangcor]

This can be useful for other async validators like valid username, valid credit card number and this kind of things

[gnomeontherun]

This is an interesting suggestion, thank you for it. We’ll consider it and see what kind of design we need to make something like this possible.

[pumano]

Small note:
looks like success check should be in rounded border as already exist in <clr-control-error></clr-control-error>.

<clr-icon shape="check-circle"></clr-icon> perfectly fit for it.

[colinreedmiller]

Good request changing to needs design - will be an enhancement to inputs.

[colinreedmiller]

@bdryanovski
Color spec in Figma:
https://www.figma.com/file/jG7B8SSsHwuj6GWqTUkn2d/Inputs-success-3326?node-id=0%3A1

[github-actions[bot]]

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.