Material-ui: Customisable MuiInputLabel required text

[quandhz]

An asterisk (*) is hard-coded to required fields. I think we should allow users to customise the asterisk or remove it if they want to.
https://github.com/callemall/material-ui/blob/fb3a42f421d9a00cbc31e69e06e5e30c7b1998fc/src/Form/FormLabel.js#L125-L127

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Be able to pass in a requiredText: Node to be displayed instead of the hard-coded asterisk, or false to completely remove it.

Current Behavior

There is no way to override the asterisk at the moment.

Steps to Reproduce (for bugs)

Not a bug

Context

For some forms that all fields are required, I'd like to display a label somewhere (All fields are required) and remove all the asterisks in each TextField.
The form looks cleaner without those.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.9 |
| React | 15.4.1 |
| browser | Chrome |
| etc | |

[oliviertassinari]

You can already remove the asterisk by setting the required property to false on the input label. Then if you want to customize it, you can directly use the children property.

[quandhz]

@oliviertassinari what if I want to set required to true (i.e. to utilise browser form validation)?

Also, my validation logic is also based on that required prop.

[oliviertassinari]

The TextField is made of different components. You can have the required property set to true for the input but to false for the label.

[sudhanshudeshmukh]

@oliviertassinari How can I customize requiredText (*) and its color?

[oliviertassinari]

@sudhanshudeshmukh By targeting the style of the FormHelperText component.

[sakhisheikh]

@sudhanshudeshmukh you can customize it within TextField just by using & to reference selectors
textField : { "& label": { // for label color: "#fccf5d" }, "& label span": { // for asterisk color: "green" }}

Here is the working codesandbox: Textfield Asterisk CSS Override

@oliviertassinari don't you think we should add some props to override this css within textField?

[oliviertassinari]

@sakhisheikh What do you have in mind?

[waker-lna]

It could be nice to be able to change the asterisk to follow to the newest UX recommendation: https://www.nngroup.com/articles/required-fields/

[oliviertassinari]

@waker-lna Could you expand on this? What do you mean by change?