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.

[Levi Thomason (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.