putting asterisk (*) on the left side.

In a required field, What's the easiest way to put the asterisk on the left side instead of the right side?

19 Replies

toeknee•17mo ago

CSS?

This one worked for me.

<script>
        const labels = document.querySelectorAll('.filament-forms-field-wrapper-label');
        
        labels.forEach(label => {
            const domSpan = label.querySelector('span');
            if(domSpan.querySelector('sup') !== null){
                label.innerHTML = `<span class="-mr-2 font-medium text-primary-red">*</span>${label.innerHTML}`;
            }
        });
    </script>

<script>
        const labels = document.querySelectorAll('.filament-forms-field-wrapper-label');
        
        labels.forEach(label => {
            const domSpan = label.querySelector('span');
            if(domSpan.querySelector('sup') !== null){
                label.innerHTML = `<span class="-mr-2 font-medium text-primary-red">*</span>${label.innerHTML}`;
            }
        });
    </script>

But doesn't mean it's the correct way. Dynamic forms that has hide/show function don't work by using this.

toeknee•17mo ago

I don't get why you are using it personally?

Patrick Boivin•17mo ago

Yeah, your script is executed on the inial page load but not if the form gets rerendered for any reason. I agree with toeknee, CSS would likely be a simpler solution. You can move the asterisk for a single field or all fields at once.

awcodes•17mo ago

I’m not sure this would be any easier with css. What is the use case? Do rtl languages typically have the asterisk on the opposite side? Ok, looking at the code you should be able to target ‘. filament-forms-field-wrapper-label’ and reverse the flex direction.

vahnmartyOP•17mo ago

my client wants the asterisk on the left side.

toeknee•17mo ago

But why... globally? Or jsut this one you have to remember as the programmer you have to guide clients sometimes unless there is logic.

vahnmartyOP•17mo ago

globally. they mentioned that doing an asterisk at the left side is more color-friendly. Just googled it too. https://www.nngroup.com/articles/required-fields/#:~:text=Should%20the%20asterisk%20precede%20or,most%20character%20of%20the%20label

Nielsen Norman Group

Marking Required Fields in Forms

Using an asterisk to mark required fields is an easy way to improve the usability of your forms. Only marking optional fields makes it difficult for people to fill out the form.

vahnmartyOP•17mo ago

->label could do the trick too. but the form has already a lot of fields.

toeknee•17mo ago

.filament-forms-field-wrapper-label .whitespace-nowrap {float:left;padding-right:5px;padding-top:2px;}

.filament-forms-field-wrapper-label .whitespace-nowrap {float:left;padding-right:5px;padding-top:2px;}

vahnmartyOP•17mo ago

your solution works but it's awkward if the label is too long.

vahnmartyOP•17mo ago

vahnmartyOP•17mo ago

Ohh. this one works too!

.filament-forms-field-wrapper-label span:has(> sup){
    @apply relative pl-3;
}

.filament-forms-field-wrapper-label .whitespace-nowrap {
    @apply absolute left-0 z-10 top-2;
}

.filament-forms-field-wrapper-label span:has(> sup){
    @apply relative pl-3;
}

.filament-forms-field-wrapper-label .whitespace-nowrap {
    @apply absolute left-0 z-10 top-2;
}

Patrick Boivin•17mo ago

Have you tried inline-flex? This could give you a slightly better result with the long labels.

awcodes•17mo ago

The label is already inline-flex that’s why I suggested just reversing it.

Patrick Boivin•17mo ago

The label is but it has only one span as a child 😔

toeknee•17mo ago

Good shout, I just went with some old basic code hehe

Kenneth Sese•17mo ago

One downside that you might bring up with the clients is that by putting the asterisk first the labels will now be unaligned if you have a mix of required and not required fields. That would drive my OCD crazy! 😂 Also, the article you referenced says “it’s unlikely to make a practical difference”, so you could point out that to them too. Also what do you mean by “color-friendly” But ultimately, if this is something they demand, as you said, ->label() might be the best way.

Patrick Boivin•17mo ago

We're diving deep into labels on this thread, I love it 🤓

Gaming

Programming

putting asterisk (*) on the left side.