title: read the Form component from @fluentui/react-northstar@0.48.0
body: <p>There is a nice looking schema-based <strong>Form</strong> component on <a href="https://fluentsite.z22.web.core.windows.net/components/form/definition?showCode=true&amp;showRtl=false&amp;showTransparent=false&amp;showVariables=false#types-form" rel="nofollow noreferrer">fluentui</a></p>
  
  <pre><code>import React from 'react';
  import { Form, Button } from '@fluentui/react-northstar';
  
  const fields = [
    {
      label: 'First name',
      name: 'firstName',
      id: 'first-name-shorthand',
      key: 'first-name',
      required: true,
    },
    {
      label: 'Last name',
      name: 'lastName',
      id: 'last-name-shorthand',
      key: 'last-name',
      required: true,
    },
    {
      label: 'I agree to the Terms and Conditions',
      control: {
        as: 'input',
      },
      type: 'checkbox',
      id: 'conditions-shorthand',
      key: 'conditions',
    },
    {
      control: {
        as: Button,
        content: 'Submit',
      },
      key: 'submit',
    },
  ];
  
  const FormExample = () =&gt; (
    &lt;Form
      onSubmit={() =&gt; {
        alert('Form submitted');
      }}
      fields={fields}
    /&gt;
  );
  
  export default FormExample;
  </code></pre>
  
  <p>But they don't offer any method/example to collect the data from what I can tell. (at least not in the documentation). 
  I can collect most values from the <code>onSubmit</code> event but it get's hacky because not all html components are necessarily input elements that have the <code>value</code> attribute. I also don't think this is the intended way to do it. Anyone can enlighten me please? I think you must be able to feed the onChange function to it somehow. Or am i supposed to add the onChange function in each field-object?</p>