Indicate a field is *required in a collection

Questions and Answers
1

I don’t see a setting, (or even an obvious CSS class I can tie in to) to allow me to indicate to users that a give field is required – either outlined in red, or with that universal eye-of-sauron asterisk (*).

Seems right now the only way to know is by not filling it out and getting a warning. Am I missing something?

(Also not sure if this better for the Strapi-admin category. Feel free to move it.)

2

You are correct on both points (location of the question and how the error is shown)

Let me ping @soupette or @HichamELBSI to see if they have any suggestions but I think it would be great to add something to the core via a PR if you are willing.

Summarizing your question/request: add some kind of universal symbol next to field if it’s marked as required. (I think a red asterisk is a good idea)

1 Like
3

Currently, it’s not possible to modify the css of the input’s label as it located in the buffetjs library.
However, until we make an update to the inputs to add a visual indicator for required field (which is not planned ATM) I am seeing to options for you to add an * for the required fields.

  • Manually edit the required fields label using the setting view. This option is the easiest one and will not require you to make any code modification to your app so upgrades are easier.
  • Use the extension option in order to edit this file with the following:
// ... previous code
const label = isRequired ? `${metadatas.label}*` : metadatas.label;

<InputsIndex
   {...metadatas}
   label={label}
   // rest of the code
2 Likes
4

Any development here? I’d also like to mark a field with a CSS border colour style to draw attention to missing information the editor role needs to fill out.

5

I want to have the * for the required field? I tried this by adding a new file at extensions/strapi-plugin-content-manager/admin/src/components/Inputs/index.js and copy the content from the node_modules/strapi-plugin-content-manager/admin/src/components/Inputs/index.js. Make below changes in the code:-

const label = isRequired ? ${metadatas.label}* : metadatas.label;
const newMetadatas = Object.assign({}, metadatas, { label });
return (
<InputsIndex
{…newMetadatas}
autoComplete=“new-password”
autoFocus={autoFocus}

But its not working. When I make the same changes in file located inside node_module, it works fine. Can you suggest what’s wrong.

6

@soupette , @DMehaffy @HichamELBSI - Can you please assist?

7

Hello @Meher_Chandan ,

To customize the content manager, you will need to rename the folder

extensions/strapi-plugins-content-manager

to

extensions/content-manager.

Do not forget to run in watch admin mode: yarn develop --watch-admin

Also, in the inputs/index.js file, you will have to replace:

const label = isRequired ? ${metadatas.label}* : metadatas.label;

by this line

const label = fieldSchema.required ? ${metadatas.label}* : metadatas.label;

Hope this helps

1 Like
8

This works like charm… Thanks a lot. you guys are awesome :slight_smile:

1 Like
9

It would be great to have this examples documented.

1 Like
10

Why is this elementary feature not available in core?
Could you please document your example?

1 Like
11

Many things are still required and not in the horizon of the Strapi’s development.

I guess they have a lot of thing to work with,

12

How do we do this for v4?

13

It’s inbuilt in strapi v4.