Input type with vanilla renderers?

I’m trying to implement a simple login form using the React vanilla renderers. Basically, I want to be able to control the input type for the rendered text inputs (i.e. type="email" and type="password"). No matter what I try, the input type is always “text”. This is especially a problem for the password field, as passwords are displayed in plaintext.

I’ve seen it suggested to use "options": { "format": "password" } to render a password field but this doesn’t seem to have any effect. Is this a limitation of the vanilla renderers? Do I need to use custom renderers to use email and password inputs?

Thanks!

Hi @haddigan!

The React Vanilla renderers don’t yet support as many use cases as the React Material renderers. However email and password renderers can easily be added.

Note that the React Vanilla renderers are structured slightly differently than the React Material renderers:

  • In React Material each renderer completely takes over the rendering of a ui schema element and cells are only used within the Table component.
  • In React Vanilla the control renderer also just renders label, description etc. and then dispatches to the cells.

Therefore in your case it’s enough to just register one to two custom cells. You can basically just copy the TextCell and modify it to support email and/or password.

If you’d like you can also contribute this back to JSON Forms :wink: In that case we should probably handle normal text and password in the TextCell and add a new cell for email.

Thanks for the quick reply and helpful answer! I will see what I can do about contributing back to the project!