#### Form default render

    const tmpValues = {
      name: 'Username',
      age: 30,
      active: true,
    };

    const tmpRules = () => {
      return {
        name: {
          title: 'Name',
          stop: true,
          required: true,
          min: 5,
        },

        age: {
          title: 'Age',
          stop: true,
          required: true,
          range: {
            min: 20,
            max: 40,
            message: '{title} mora biti između 20 i 40.',
          },
        },
      };
    };

    const tmpFields = [
      {
        label: 'name',
        formField: <Form.TextField field="name" label="Name" />,
      },
      {
        label: 'age',
        formField: <Form.NumberField field="age" label="Age" />,
      },
      {
        label: 'active',
        formField: <Form.CheckBoxField field="active" label="Active" />,
      },
    ];

    <App>
      <Form
        title="Form demo"
        fields={tmpFields}
        values={tmpValues}
        rules={tmpRules}
        onSubmit={(values) => { console.log('Sumbit'); console.log(values); }}
        onClose={() => { window.alert('Form close'); }}
      />
    </App>

#### Form override render

    const tmpValues = {
      name: 'Username',
      age: 30,
      active: true,
    };

    const tmpRules = () => {
      return {
        name: {
          title: 'Name',
          stop: true,
          required: true,
          min: 5,
        },

        age: {
          title: 'Age',
          stop: true,
          required: true,
          range: {
            min: 20,
            max: 40,
          },
        },
      };
    };

    const tmpFields = [
      {
        label: 'name',
        formField: <Form.TextField field="name" label="Name" />,
      },
      {
        label: 'age',
        formField: <Form.NumberField field="age" label="Age" />,
      },
      {
        label: 'active',
        formField: <Form.CheckBoxField field="active" label="Active" />,
      },
    ];

    const tmpRender = (fieldsObject) => {
      return (
        <Box pad={{vertical: 'small', between: 'small'}}>
          <Box direction="row" pad={{between: 'small'}}>
            {fieldsObject.name}
            {fieldsObject.active}
          </Box>
          <Box>
            {fieldsObject.age}
          </Box>
        </Box>
      );
    };

    <App>
      <Form
        title="Form demo"
        fields={tmpFields}
        render={tmpRender}
        values={tmpValues}
        rules={tmpRules}
        onSubmit={(values) => { console.log('Sumbit'); console.log(values); }}
        onClose={() => { window.alert('Form close'); }}
      />
    </App> 


#### Preview Form (readonly form)

    const Button =  require('grommet/components/Button');

    const tmpValues = {
      name: 'Username',
      age: 30,
      active: true,
    };

    const tmpRules = () => {
      return {
        name: {
          title: 'Name',
          stop: true,
          required: true,
          min: 5,
        },

        age: {
          title: 'Age',
          stop: true,
          required: true,
          range: {
            min: 20,
            max: 40,
          },
        },
      };
    };

    class FormDemo extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          formReadonly: false,
        };
      }

      render() {
        return (
          <App>  
            <Box>
              <Box>
                <Form
                  readonly={this.state.formReadonly}
                  title="Form demo"
                  values={tmpValues}
                  rules={tmpRules}
                  onSubmit={(values) => { console.log('Submit'); console.log(values); }}
                  onClose={() => { window.alert('Form close'); }}
                  fields={[
                    {
                      label: 'name',
                      formField: <Form.TextField field="name" label="Name" />,
                    },
                    {
                      label: 'age',
                      formField: <Form.NumberField field="age" label="Age" />,
                    },
                    {
                      label: 'active',
                      formField: <Form.CheckBoxField field="active" label="Active" />,
                    },
                  ]}
                />
              </Box>
              <br />
              <br />
              <br />
              <br />
              <br />
              <br />
              <Box align="center">
                <Button
                  label={this.state.formReadonly ? 'Make form editable' : 'Make form readonly'}
                  onClick={() => {
                    const formReadonly = !this.state.formReadonly;
                    this.setState({
                      formReadonly,
                    });
                  }}
                />
              </Box>
            </Box>
          </App>  
        );
      }
    }

    <FormDemo />