Allow to not add "*" for form control labels when marked as required

[d-koppenhagen]

Currently DBSelect, DBInput etc add a small asterisk in the ::after Pseudo Element of their label when the control is marked as required. This should be optional or skippable.

Let's say we have a simple form with a few <input> and <select> fields and we have a form-wide description that all fields are required or we simply saying everything is required unless a field is labelled as "optional".

So in my case I assume that I don't need to visually tell users, for every field that it is required since the every information is required and probably I've also written it before. In such case I think the asterisk "*" coming from input[required=true] or select[required=true] is may visually distracting. Nonetheless, I want to semantically mark the fields as required sind when going through the form with a screenreader I don't have this visual overview an probably I jump directly into the form without reading the hint before that every field is required. In this cases, I want to clearly know that the input is required.

Long story short: It would be nice to have an option to disable / hide the Asterisk ("*") within the label even if a control has been marked as required.

For example:

<DBInput label="firstname" required ={true} requiredAnnotation={false} />

In such case the rendered HTML should contain required="true" but the CSS applied to the label should not have the "*" in the ::after() element.

[d-koppenhagen]

Current workaround:

.hideAsterisk {
    label::after {
        content: '';
    }
}

and...

<DBInput label="firstname" required ={true}  className={cn(styles.hideAsterisk)} />

[nmerget]

@leape this is also part of the design