Unable to add asterisk or star for the required fields labels

[AbhaysinghBhosale]

Following is my code and want to add star to the required fields,

<AvField type='text' id='ClusterName' name='ClusterName' label={'ClusterName'} placeholder={'Cluster_Name'} value={""} validate={{ required: {value: true, errorMessage: 'Cluster_Name'}, pattern: {value: '^[A-Za-z0-9._-]+(?: +[A-Za-z0-9._-]+)*$', errorMessage: 'MSG_Validation_Cluster'}, }} />

Cant find any options to apply star to required fields.

[TheSharpieOne]

There are many ways to go about this. The easiest is to just add * to the label value. You can go even further by styling it via <sup>*</sup>. You can even style it to be red and create a helper function to make it easier and not have <sup>*</sup> everywhere

https://stackblitz.com/edit/reactstrap-validation-v2-mbkhus?file=Example.js

[AbhaysinghBhosale]

@TheSharpieOne adding * to lable it not the best way, as if we keep adding start with each label how we will colour it to red and label remains black, If we keep adding ^* everywhere with labels on the pages it will not be good idea. I was expecting to have some prop in packages which will do this just by setting it to true.

[TheSharpieOne]

That is where the utility/helper function I mentioned comes in very handy. Then you don't need to add <sup>*</sup> everywhere with labels on the page. Optionally, you can extend <AvField> to enhance the label and just import and use it in place of AvField.

import React from 'react';
import { AvField } from 'availity-reactstrap-validation';

const MyField = ({label, ...rest}) => {
  if (rest.required) {
    label = <>{label}<sup>*</sup></>;
  }
  return <AvField label={label} {...rest} />;
}

export default MyField;

https://stackblitz.com/edit/reactstrap-validation-v2-6tmcc4?file=MyField.js