Skip to content

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

@d-koppenhagen

Description

@d-koppenhagen
Contributor

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.

Activity

d-koppenhagen

d-koppenhagen commented on May 13, 2025

@d-koppenhagen
ContributorAuthor

Current workaround:

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

and...

<DBInput label="firstname" required ={true}  className={cn(styles.hideAsterisk)} />
added theissue type on May 13, 2025
nmerget

nmerget commented on May 13, 2025

@nmerget
Collaborator

@leape this is also part of the design

added a commit that references this issue on Jun 11, 2025
d3836c0
moved this to 🕋 In progress in UX Engineering Team Backlogon Jun 11, 2025
changed the issue type fromtoon Jun 16, 2025
changed the issue type fromtoon Jun 16, 2025
moved this from 🕋 In progress to ✅ Done in UX Engineering Team Backlogon Jul 2, 2025
added a commit that references this issue on Jul 2, 2025
7c5d09a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    ✅ Done

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @mfranzke@d-koppenhagen@sissihamel@nmerget

      Issue actions

        Allow to not add "*" for form control labels when marked as required · Issue #4197 · db-ux-design-system/core-web