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