Make asterisk sign on InputLabel changeable

[yuki-js]

In some cultures asterisk sign is not assumed as the required form input. It will be helpful to be able to replace into some more descriptive labels like red pill saying "必須".

Now mantine hardcodes the asterisk sign. I want a feature to inject such signs here.

mantine/packages/@mantine/core/src/components/Input/InputLabel/InputLabel.tsx

Line 114 in bd73170

{' *'}

[totto2727]

I would like to work on this improvement, what do you think?

I think the implementation itself is possible, but I am wondering how to handle withAsterisk Props and how to interface with asterisk Props (for passing components).

ex.

• Removing withAsterisk Props.
• asterisk Props are passed required Props from the parent.

[yuki-js]

I appreciate you taking on it!

How about making the "required" prop accept not only a boolean value but also a ReactNode?

[MathRobin]

• Removing withAsterisk Props.
• asterisk Props are passed required Props from the parent.

Why not keep withAsterisk but playing with different values ?

Example :

• withAsterisk={false}, no asterisk at all (the obvious one)
• withAsterisk={true}, classical asterisk sign
• withAsterisk='星', custom sign, based on the string passed

[totto2727]

Personally, I would like to be able to separate out labels for both required and optional.
I would like to avoid passing ReactNode directly to requiredProps.
So I am considering the following type definition.

required?: boolean
withAsterisk?: boolean | ReactNode | FC<{required: boolean}>

// Usage
function Astrisk({required}) {
  return required ? <RequiredLabel /> : <OptionalLabel />
}

...

<Input {...props} withAsterisk={Astrisk} />

However, if the user does a little extension of the Input component, I think that FC<... > is not necessary.

// User-defined Input exmaple
function CutomInput(props) {
  return <Input {...props} withAsterisk={props.required ? <RequiredLabel /> : <OptionalLabel />} />
}