Fluent UI React-Northstar form

[WynandCoetzerIT]

Hi,

I was hoping that someone could point me to some documentation/demo on how to use a Form in Fluent UI React-Northstar.
I am having some issues with the Datepicker submitting the form when clicked and I cant seem to hook on to the values of any items in the form.

Also, I am currently using a MaskedTextField from office-ui-fabric-react and re-styling it to try and fit the fluent ui look so if there is a way to ad a mask to a Fluent UI input that would be great.

I am creating this app as a Microsoft Teams Tab, so I would like to be able to theme the components in the form.

Any help would be greatly appreciated.

[levithomason]

Hello @WynandCoetzerIT, you'll want to have listeners on your form elements and save their value changes in your state. Then, you'll capture the form submission and read the form state at that time.

🎉 Solution

Here's a working codesandbox with the setup you described.

Note, the warning on the Datepicker docs.

The next release, 0.52.x has may Datepicker features and functionality..

Other Resources

• Fluent UI React Northstar Form docs
• Fluent UI React Northstar Datepicker docs
• Office UI Fabric React MaskedTextField docs

You also might be interested in React's docs on HTML forms for idiomatic React patterns.