Creating form with Material UI - Outlined label

0
Hi! I have been reading the following article: Maxing Mendix Forms UX with Material UI | by Wouter Penris | Mendix Community | Feb, 2023 | Medium   Also the related article: Maxing Mendix Forms UX with Material UI | by Wouter Penris | Mendix Community | Feb, 2023 | Medium   I want to accomplish a form with a design as below where the label is outlined when the user puts the cursor in the field.   You can see the label and try it out yourself: React Text Field component - Material UI (mui.com)   or in the following mendix application Mendix - Homepage (mxapps.io)   I started with adding some custom scss file with this code:     However the classes are not recognized and creating an error when compiling.   I don’t really know what next step to take to get this form design. I don’t have much experience with css or scss.   Has anyone done this and can lead me in the right direction?
asked
1 answers
0

To use these classes you would need the following:

 

Declare ‘a’ container / dataview with class mui, inside for each ‘input’ you place you should give it the class ‘outlined’. That should apply the classes. Do take note that you'll have to implement the ‘attribute state tracking’ mentioned in the article as well to apply the ‘state-classes (empty-invalid, filled-invalid etc)’

answered