Indication for Mandatory TextField

[SupriyaPKalghatgi]

Description

Currently I can find validate and its related prop to know if the textfield has unexpected input / input format.
But can there be an indication as to which all fields are mandatory in a given input form?
Something like * with the input field, shared in screenshot below

Related to

• Components

Screenshots/Video

Environment

• Expo version: ^49.0.7,
• React Native version: 0.72.3
• React Native UI Lib version: ^7.8.0

Affected platforms

• Android
• iOS

[SupriyaPKalghatgi]

@ethanshar Can you please check this

[ethanshar]

@nitzanwix
Let's consider adding this as a feature to the TextField component

[nitzanyiz]

Please refer to the last commit. You can now add a prop "showMandatoryIndication" to the TextField to show a star if the TextField is required (i.e. has a 'required' validator).
40879e5

[SupriyaPKalghatgi]

@nitzanwix The default color of * should be red if showMandatoryIndication is true
Instead I found it to be same color as that of TextInput Label.
Anything that I am missing?

[nitzanyiz]

Due to our UI guidelines and some layout problems we cannot explicitly expose props for that use case.
HOWEVER, a workaround to achieve the behavior you want could be using the highlightString and highlightStyle of the Text component (via the labelProps).
The following TextField will get you what you want.

<TextField
  placeholder="Enter School name"
  label="School name"
  validate={'required'}
  labelProps={{highlightString: '*', highlightStyle: {color: 'red'}}}
  showMandatoryIndication
/>

Please mind that if your label contains an '*' it would also be colored.
@SupriyaPKalghatgi