Required class for labels

[gunner1095]

It would be nice if a required class could be added to labels when an input is required.

For example when a text input is required and a label is present:

<x:form::input type="text" name="name" label="My Label" .. :required="true" />

Add a required class to the label

<label for="text-name" class="form-label required">My Label</label>

This way we could style the label for required fields. Something like:

label.required {
  font-weight: bold;
}

[Okipa]

Hi @gunner1095, if you want to add a specific style to the label positioned before a required input, I'm sure there is a way to do it with pure CSS. You can add a required attribute to any component and start from here.

However, I would not recommend to show users that fields are required from a label style, as labels may not be displayed in some cases.

In order to cover all use cases, I personnaly do something like this to display a red asterisk in required fields (using Bootstrap and the $danger color):

input[required]:not(.is-valid):not(.is-invalid),
select[required]:not(.is-valid):not(.is-invalid),
textarea[required]:not(.is-valid):not(.is-invalid),
input[type='file'][required]:not(.is-valid):not(.is-invalid) + label {
    background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 455 455"> \
<polygon fill="#{str-replace(#{$danger}, '#', '%23')}" points="347.49,227 454.5,165.212 394.508,61.288 287.5,123.077 287.5,0 167.5,0 167.5,123.077 60.492,61.288 0.499,165.212 107.51,227 0.5,288.788 60.492,392.712 167.5,330.923 167.5,455 287.5,455 287.5,330.923 394.508,392.712 454.501,288.788"/> \
</svg>') !important;
    background-position: right 5px top 5px;
    background-repeat: no-repeat;
    background-size: 7px;
}

Anyway, it seems to be a too specific use case to be implemented as a new feature for everyone. Please try solutions evoked above and tell me if this work for you.