219 words, 2 min read

By default, Element Plus displays the required asterisk before a form label, for example: *Name. While this is functional, some design systems prefer placing the asterisk after the label instead, like Name*. Fortunately, it’s easy to adjust this behavior using either a CSS override or a custom label slot.

If you want to apply this change throughout your app, you can hide the default prefix and append your own asterisk using CSS:

.el-form-item.is-required .el-form-item__label:before {
display: none;
}
.el-form-item.is-required .el-form-item__label:after {
content: '*';
color: var(--el-color-danger);
margin-left: 4px;
}

This snippet removes the default “before” pseudo-element and adds a red asterisk to the end of each required label. You can include this in your global stylesheet or inside a scoped <style> block.

If you only want to change this for specific fields, you can use the #label slot on ElFormItem:

<ElFormItem prop="name" required>
<template #label>
Name<span style="color: var(--el-color-danger); margin-left: 4px">*</span>
</template>
<ElInput v-model="form.name" />
</ElFormItem>

This approach gives you full control over the label content and allows you to combine the asterisk with tooltips, icons, or other elements.

If you want a global change, a small CSS override is the simplest approach.

For fine-grained control, using the label slot is more flexible. Both options work seamlessly with Element Plus and ensure your required field indicators fit your preferred design style.

If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.