From fe51c528d2c9b3db88801056c66433efc8e89ef9 Mon Sep 17 00:00:00 2001
From: Michael Schramm <michael.schramm@gmail.com>
Date: Tue, 1 Mar 2022 15:21:51 +0100
Subject: [PATCH] change default form layout to card

---
 .eslintrc.js                                  |   1 +
 CHANGELOG.md                                  |   3 +
 .../form/admin/export.submission.action.tsx   |   7 +-
 components/form/admin/field.card.tsx          |   5 +-
 components/form/admin/fields.tab.tsx          |   4 +-
 components/form/admin/submission.values.tsx   |  16 +-
 components/form/admin/types/index.ts          |  22 ---
 components/form/layouts/card/field.tsx        |  13 +-
 components/form/layouts/card/index.tsx        |   9 +-
 components/form/layouts/slider/field.tsx      |  12 +-
 components/form/layouts/slider/index.tsx      |   1 +
 components/form/types/abstract.type.tsx       |  38 +++++
 .../checkbox/checkbox.admin.tsx}              |   4 +-
 .../checkbox.input.tsx}                       |  31 ++--
 components/form/types/checkbox/index.ts       |  15 ++
 .../date/date.admin.tsx}                      |   4 +-
 .../{date.type.tsx => date/date.input.tsx}    |  24 ++-
 components/form/types/date/index.ts           |  24 +++
 .../dropdown/dropdown.admin.tsx}              |   4 +-
 .../dropdown.input.tsx}                       |  20 ++-
 components/form/types/dropdown/index.ts       |  15 ++
 .../email/email.admin.tsx}                    |   4 +-
 .../{email.type.tsx => email/email.input.tsx} |  22 ++-
 components/form/types/email/index.ts          |  15 ++
 .../field.admin.props.ts}                     |   2 +-
 .../form/types/field.input.builder.type.ts    |   6 +
 .../{type.props.ts => field.input.props.ts}   |   2 +-
 .../hidden/hidden.admin.tsx}                  |   4 +-
 components/form/types/hidden/index.ts         |  15 ++
 .../image/image.admin.tsx}                    |   0
 .../form/types/{ => image}/image.type.tsx     |   0
 components/form/types/image/index.ts          |  15 ++
 components/form/types/index.ts                |  57 +++----
 components/form/types/link/index.ts           |  15 ++
 .../link/link.admin.tsx}                      |   4 +-
 .../{link.type.tsx => link/link.input.tsx}    |  22 ++-
 components/form/types/location/index.ts       |  34 ++++
 .../location/location.admin.tsx}              |   6 +-
 .../form/types/location/location.input.tsx    | 153 ++++++++++++++++++
 components/form/types/map.type.tsx            |   0
 components/form/types/number/index.ts         |  19 +++
 .../number/number.admin.tsx}                  |   4 +-
 .../number.input.tsx}                         |  22 ++-
 components/form/types/radio/index.ts          |  15 ++
 .../radio/radio.admin.tsx}                    |   4 +-
 .../{radio.type.tsx => radio/radio.input.tsx} |  22 ++-
 components/form/types/rating/index.ts         |  19 +++
 .../rating/rating.admin.tsx}                  |   4 +-
 .../rating.input.tsx}                         |  20 ++-
 components/form/types/slider/index.ts         |  19 +++
 .../slider/slider.admin.tsx}                  |   4 +-
 .../slider.input.tsx}                         |  21 ++-
 components/form/types/textarea/index.ts       |  15 ++
 .../textarea/textarea.admin.tsx}              |   4 +-
 .../textarea.input.tsx}                       |  22 ++-
 components/form/types/textfield/index.ts      |  15 ++
 .../textfield/textfield.admin.tsx}            |   4 +-
 .../textfield.input.tsx}                      |  29 +++-
 components/form/types/yes_no/index.tsx        |  36 +++++
 .../yes_no/yes_no.admin.tsx}                  |   4 +-
 .../yes_no.input.tsx}                         |  20 ++-
 components/use.submission.ts                  |  18 ++-
 pages/admin/forms/create.tsx                  |   1 -
 63 files changed, 786 insertions(+), 203 deletions(-)
 delete mode 100644 components/form/admin/types/index.ts
 create mode 100644 components/form/types/abstract.type.tsx
 rename components/form/{admin/types/checkbox.type.tsx => types/checkbox/checkbox.admin.tsx} (95%)
 rename components/form/types/{checkbox.type.tsx => checkbox/checkbox.input.tsx} (56%)
 create mode 100644 components/form/types/checkbox/index.ts
 rename components/form/{admin/types/date.type.tsx => types/date/date.admin.tsx} (91%)
 rename components/form/types/{date.type.tsx => date/date.input.tsx} (77%)
 create mode 100644 components/form/types/date/index.ts
 rename components/form/{admin/types/dropdown.type.tsx => types/dropdown/dropdown.admin.tsx} (95%)
 rename components/form/types/{dropdown.type.tsx => dropdown/dropdown.input.tsx} (74%)
 create mode 100644 components/form/types/dropdown/index.ts
 rename components/form/{admin/types/email.type.tsx => types/email/email.admin.tsx} (79%)
 rename components/form/types/{email.type.tsx => email/email.input.tsx} (61%)
 create mode 100644 components/form/types/email/index.ts
 rename components/form/{admin/types/type.props.ts => types/field.admin.props.ts} (78%)
 create mode 100644 components/form/types/field.input.builder.type.ts
 rename components/form/types/{type.props.ts => field.input.props.ts} (86%)
 rename components/form/{admin/types/hidden.type.tsx => types/hidden/hidden.admin.tsx} (75%)
 create mode 100644 components/form/types/hidden/index.ts
 rename components/form/{admin/types/image.type.tsx => types/image/image.admin.tsx} (100%)
 rename components/form/types/{ => image}/image.type.tsx (100%)
 create mode 100644 components/form/types/image/index.ts
 create mode 100644 components/form/types/link/index.ts
 rename components/form/{admin/types/link.type.tsx => types/link/link.admin.tsx} (79%)
 rename components/form/types/{link.type.tsx => link/link.input.tsx} (61%)
 create mode 100644 components/form/types/location/index.ts
 rename components/form/{admin/types/location.type.tsx => types/location/location.admin.tsx} (95%)
 create mode 100644 components/form/types/location/location.input.tsx
 delete mode 100644 components/form/types/map.type.tsx
 create mode 100644 components/form/types/number/index.ts
 rename components/form/{admin/types/number.type.tsx => types/number/number.admin.tsx} (76%)
 rename components/form/types/{number.type.tsx => number/number.input.tsx} (61%)
 create mode 100644 components/form/types/radio/index.ts
 rename components/form/{admin/types/radio.type.tsx => types/radio/radio.admin.tsx} (95%)
 rename components/form/types/{radio.type.tsx => radio/radio.input.tsx} (69%)
 create mode 100644 components/form/types/rating/index.ts
 rename components/form/{admin/types/rating.type.tsx => types/rating/rating.admin.tsx} (78%)
 rename components/form/types/{rating.type.tsx => rating/rating.input.tsx} (60%)
 create mode 100644 components/form/types/slider/index.ts
 rename components/form/{admin/types/slider.type.tsx => types/slider/slider.admin.tsx} (94%)
 rename components/form/types/{slider.type.tsx => slider/slider.input.tsx} (80%)
 create mode 100644 components/form/types/textarea/index.ts
 rename components/form/{admin/types/textarea.type.tsx => types/textarea/textarea.admin.tsx} (76%)
 rename components/form/types/{textarea.type.tsx => textarea/textarea.input.tsx} (57%)
 create mode 100644 components/form/types/textfield/index.ts
 rename components/form/{admin/types/text.type.tsx => types/textfield/textfield.admin.tsx} (73%)
 rename components/form/types/{text.type.tsx => textfield/textfield.input.tsx} (50%)
 create mode 100644 components/form/types/yes_no/index.tsx
 rename components/form/{admin/types/yes_no.type.tsx => types/yes_no/yes_no.admin.tsx} (77%)
 rename components/form/types/{yes_no.type.tsx => yes_no/yes_no.input.tsx} (61%)

diff --git a/.eslintrc.js b/.eslintrc.js
index ea72d4e..e222e14 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
     '@typescript-eslint/no-unsafe-assignment': 'off',
     '@typescript-eslint/no-unsafe-argument': 'off',
     '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     'react/prop-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     'jsx-a11y/no-autofocus': 'off',
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 42db32c..3bab40e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,11 +16,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - update translations (https://github.com/ohmyform/ui/pull/70)
 - show warning icon in form list if not public
 - default form layout is now "card"
+- creating of new fields combined in new field types
 
 ### Fixed
 
 - locale scripts were missing dependency
 - edit user shows now email in title
+- focus is now passed also do slide layout fields
+- empty fields are no longer submitted
 
 ### Security
 
diff --git a/components/form/admin/export.submission.action.tsx b/components/form/admin/export.submission.action.tsx
index aa6b37a..1c3b747 100644
--- a/components/form/admin/export.submission.action.tsx
+++ b/components/form/admin/export.submission.action.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react'
 import { SubmissionFragment } from '../../../graphql/fragment/submission.fragment'
 import { useFormQuery } from '../../../graphql/query/form.query'
 import { useSubmissionPagerImperativeQuery } from '../../../graphql/query/submission.pager.query'
+import { fieldTypes } from '../types'
 
 interface Props {
   form: string
@@ -66,9 +67,9 @@ export const ExportSubmissionAction: React.FC<Props> = (props) => {
 
         data.fields.forEach((field) => {
           try {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const decoded: { value: CellValue } = JSON.parse(field.value)
-            row.push(decoded.value || '')
+            fieldTypes[field.type]?.stringifyValue(field.value)
+
+            row.push(fieldTypes[field.type]?.stringifyValue(field.value))
           } catch (e) {
             row.push('')
           }
diff --git a/components/form/admin/field.card.tsx b/components/form/admin/field.card.tsx
index 11c35e8..788f0e8 100644
--- a/components/form/admin/field.card.tsx
+++ b/components/form/admin/field.card.tsx
@@ -6,9 +6,8 @@ import { FieldData } from 'rc-field-form/lib/interface'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormFieldFragment, FormFieldLogicFragment } from '../../../graphql/fragment/form.fragment'
+import { fieldTypes } from '../types'
 import { LogicBlock } from './logic.block'
-import { adminTypes } from './types'
-import { TextType } from './types/text.type'
 
 interface Props {
   form: FormInstance
@@ -34,7 +33,7 @@ export const FieldCard: React.FC<Props> = ({
   const type = form.getFieldValue([
     'form', 'fields', field.name as string, 'type',
   ]) as string
-  const TypeComponent = adminTypes[type] || TextType
+  const TypeComponent = (fieldTypes[type] || fieldTypes['textfield']).adminFormField()
 
   const [shouldUpdate, setShouldUpdate] = useState(false)
   const [nextTitle, setNextTitle] = useState<string>(
diff --git a/components/form/admin/fields.tab.tsx b/components/form/admin/fields.tab.tsx
index 3ab66cd..b9d2593 100644
--- a/components/form/admin/fields.tab.tsx
+++ b/components/form/admin/fields.tab.tsx
@@ -7,8 +7,8 @@ import { FieldData } from 'rc-field-form/lib/interface'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormFieldFragment } from '../../../graphql/fragment/form.fragment'
+import { fieldTypes } from '../types'
 import { FieldCard } from './field.card'
-import { adminTypes } from './types'
 
 const logger = debug('FieldsTab')
 
@@ -61,7 +61,7 @@ export const FieldsTab: React.FC<Props> = (props) => {
             }}
           >
             <Select value={nextType} onChange={(e) => setNextType(e)} style={{ minWidth: 200 }}>
-              {Object.keys(adminTypes).map((type) => (
+              {Object.keys(fieldTypes).map((type) => (
                 <Select.Option value={type} key={type}>
                   {t(`type:${type}.name`)}
                 </Select.Option>
diff --git a/components/form/admin/submission.values.tsx b/components/form/admin/submission.values.tsx
index 10d21fc..ebc3dd5 100644
--- a/components/form/admin/submission.values.tsx
+++ b/components/form/admin/submission.values.tsx
@@ -7,6 +7,7 @@ import {
   SubmissionFragment,
   SubmissionFragmentField,
 } from '../../../graphql/fragment/submission.fragment'
+import { fieldTypes } from '../types'
 
 interface Props {
   form: FormPagerFragment
@@ -30,21 +31,8 @@ export const SubmissionValues: React.FC<Props> = (props) => {
     {
       title: t('submission:value'),
       render(_, row) {
-        console.log('row.value', row.value)
-
         try {
-          const data = JSON.parse(row.value) as { value: string }
-
-          if (Array.isArray(data.value)) {
-            return (
-              <ul>
-                {data.value.map(r => (
-                  <li key={r}>{JSON.stringify(r)}</li>
-                ))}
-              </ul>
-            )
-          }
-          return data.value
+          return fieldTypes[row.type]?.displayValue(row.value)
         } catch (e) {
           return row.value
         }
diff --git a/components/form/admin/types/index.ts b/components/form/admin/types/index.ts
deleted file mode 100644
index 842c1fd..0000000
--- a/components/form/admin/types/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import dynamic from 'next/dynamic'
-import { ComponentType } from 'react'
-import { AdminFieldTypeProps } from './type.props'
-
-export const adminTypes: {
-  [key: string]: ComponentType<AdminFieldTypeProps>
-} = {
-  checkbox: dynamic<AdminFieldTypeProps>(() => import('./checkbox.type').then(c => c.CheckboxType )),
-  date: dynamic<AdminFieldTypeProps>(() => import('./date.type').then(c => c.DateType )),
-  dropdown: dynamic<AdminFieldTypeProps>(() => import('./dropdown.type').then(c => c.DropdownType )),
-  email: dynamic<AdminFieldTypeProps>(() => import('./email.type').then(c => c.EmailType )),
-  hidden: dynamic<AdminFieldTypeProps>(() => import('./hidden.type').then(c => c.HiddenType )),
-  link: dynamic<AdminFieldTypeProps>(() => import('./link.type').then(c => c.LinkType )),
-  location: dynamic<AdminFieldTypeProps>(() => import('./location.type').then(c => c.LocationType ), { ssr: false }),
-  number: dynamic<AdminFieldTypeProps>(() => import('./number.type').then(c => c.NumberType )),
-  radio: dynamic<AdminFieldTypeProps>(() => import('./radio.type').then(c => c.RadioType )),
-  rating: dynamic<AdminFieldTypeProps>(() => import('./rating.type').then(c => c.RatingType )),
-  slider: dynamic<AdminFieldTypeProps>(() => import('./slider.type').then(c => c.SliderType )),
-  textarea: dynamic<AdminFieldTypeProps>(() => import('./textarea.type').then(c => c.TextareaType )),
-  textfield: dynamic<AdminFieldTypeProps>(() => import('./text.type').then(c => c.TextType )),
-  yes_no: dynamic<AdminFieldTypeProps>(() => import('./yes_no.type').then(c => c.YesNoType )),
-}
diff --git a/components/form/layouts/card/field.tsx b/components/form/layouts/card/field.tsx
index ef20745..b1e01c6 100644
--- a/components/form/layouts/card/field.tsx
+++ b/components/form/layouts/card/field.tsx
@@ -7,11 +7,9 @@ import { StyledH1 } from '../../../styled/h1'
 import { StyledMarkdown } from '../../../styled/markdown'
 import { useRouter } from '../../../use.router'
 import { fieldTypes } from '../../types'
-import { TextType } from '../../types/text.type'
-import { FieldTypeProps } from '../../types/type.props'
 
 interface Props {
-  focus: boolean
+  focus?: boolean
   field: FormPublicFieldFragment
   design: FormPublicDesignFragment
 }
@@ -19,7 +17,7 @@ interface Props {
 export const Field: React.FC<Props> = ({ field, design, focus, ...props }) => {
   const router = useRouter()
 
-  const FieldInput: React.FC<FieldTypeProps> = fieldTypes[field.type] || TextType
+  const FieldInput = (fieldTypes[field.type] || fieldTypes['text']).inputFormField()
 
   const getUrlDefault = (): string => {
     if (router.query[field.id]) {
@@ -57,7 +55,12 @@ export const Field: React.FC<Props> = ({ field, design, focus, ...props }) => {
           <StyledMarkdown design={design} type={'question'} >{field.description}</StyledMarkdown>
         )}
 
-        <FieldInput design={design} field={field} urlValue={getUrlDefault()} focus={focus} />
+        <FieldInput
+          design={design}
+          field={field}
+          urlValue={getUrlDefault()}
+          focus={false}/* cannot use this in card layout! try with 2 input fields */
+        />
       </div>
     </div>
   )
diff --git a/components/form/layouts/card/index.tsx b/components/form/layouts/card/index.tsx
index 3d9dbf1..c9b5211 100644
--- a/components/form/layouts/card/index.tsx
+++ b/components/form/layouts/card/index.tsx
@@ -139,7 +139,14 @@ export const CardLayout: React.FC<LayoutProps> = (props) => {
                   return null
                 }
 
-                return <Field key={field.id} field={field} design={design} focus={i === 0} />
+                return (
+                  <Field
+                    key={field.id}
+                    field={field}
+                    design={design}
+                    focus={false}
+                  />
+                )
               })}
               <div
                 style={{
diff --git a/components/form/layouts/slider/field.tsx b/components/form/layouts/slider/field.tsx
index 1899d59..06eb811 100644
--- a/components/form/layouts/slider/field.tsx
+++ b/components/form/layouts/slider/field.tsx
@@ -11,10 +11,9 @@ import { StyledH1 } from '../../../styled/h1'
 import { StyledMarkdown } from '../../../styled/markdown'
 import { useRouter } from '../../../use.router'
 import { fieldTypes } from '../../types'
-import { TextType } from '../../types/text.type'
-import { FieldTypeProps } from '../../types/type.props'
 
 interface Props {
+  focus: boolean
   field: FormPublicFieldFragment
   design: FormPublicDesignFragment
 
@@ -29,7 +28,7 @@ export const Field: React.FC<Props> = ({ field, save, design, next, prev, ...pro
   const router = useRouter()
   const { t } = useTranslation()
 
-  const FieldInput: React.FC<FieldTypeProps> = fieldTypes[field.type] || TextType
+  const FieldInput = (fieldTypes[field.type] || fieldTypes[field.type]).inputFormField()
 
   const finish = (data) => {
     console.log('received field data', data)
@@ -81,7 +80,12 @@ export const Field: React.FC<Props> = ({ field, save, design, next, prev, ...pro
           <StyledMarkdown design={design} type={'question'}>{field.description}</StyledMarkdown>
         )}
 
-        <FieldInput design={design} field={field} urlValue={getUrlDefault()} />
+        <FieldInput
+          design={design}
+          field={field}
+          focus={props.focus}
+          urlValue={getUrlDefault()}
+        />
       </div>
       <div
         style={{
diff --git a/components/form/layouts/slider/index.tsx b/components/form/layouts/slider/index.tsx
index 3c731cc..2e43b7f 100644
--- a/components/form/layouts/slider/index.tsx
+++ b/components/form/layouts/slider/index.tsx
@@ -77,6 +77,7 @@ export const SliderLayout: React.FC<LayoutProps> = (props) => {
                 <SwiperSlide key={field.id}>
                   <Field
                     field={field}
+                    focus={swiper?.activeIndex === (startPage.show ? 1 : 0) + i}
                     design={design}
                     save={async (values: { [key: string]: unknown }) => {
                       await setField(field.id, values[field.id])
diff --git a/components/form/types/abstract.type.tsx b/components/form/types/abstract.type.tsx
new file mode 100644
index 0000000..f1f0e69
--- /dev/null
+++ b/components/form/types/abstract.type.tsx
@@ -0,0 +1,38 @@
+import React, { ComponentType } from 'react'
+import { FieldAdminProps } from './field.admin.props'
+import { FieldInputProps } from './field.input.props'
+
+export abstract class AbstractType<A = any> {
+  public parseValue(raw: string): A {
+    return JSON.parse(raw) as A
+  }
+
+  public parseUrlValue(raw: string): A {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return raw as any
+  }
+
+  public stringifyValue(raw: string): string {
+    return raw
+  }
+
+  public displayValue(raw: string): JSX.Element {
+    const data = this.parseValue(raw)
+
+    if (Array.isArray(data)) {
+      return (
+        <ul>
+          {data.map(r => (
+            <li key={r}>{JSON.stringify(r)}</li>
+          ))}
+        </ul>
+      )
+    }
+
+    return <div>{this.stringifyValue(raw)}</div>
+  }
+
+  public abstract adminFormField(): ComponentType<FieldAdminProps>
+
+  public abstract inputFormField(): ComponentType<FieldInputProps>
+}
diff --git a/components/form/admin/types/checkbox.type.tsx b/components/form/types/checkbox/checkbox.admin.tsx
similarity index 95%
rename from components/form/admin/types/checkbox.type.tsx
rename to components/form/types/checkbox/checkbox.admin.tsx
index 81db3a3..f7a0836 100644
--- a/components/form/admin/types/checkbox.type.tsx
+++ b/components/form/types/checkbox/checkbox.admin.tsx
@@ -1,9 +1,9 @@
 import { Button, Col, Form, Input, Row } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const CheckboxType: React.FC<AdminFieldTypeProps> = (props) => {
+export const CheckboxAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/checkbox.type.tsx b/components/form/types/checkbox/checkbox.input.tsx
similarity index 56%
rename from components/form/types/checkbox.type.tsx
rename to components/form/types/checkbox/checkbox.input.tsx
index 36ff904..71383cb 100644
--- a/components/form/types/checkbox.type.tsx
+++ b/components/form/types/checkbox/checkbox.input.tsx
@@ -2,32 +2,40 @@ import { Checkbox, Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledCheckbox } from '../../styled/checkbox'
-import { FieldTypeProps } from './type.props'
+import { StyledCheckbox } from '../../../styled/checkbox'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/checkbox')
+const logger = debug('checkbox.input')
 
-export const CheckboxType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function CheckboxInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue: string = undefined
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.options
           .map((option) => option.value)
@@ -36,8 +44,13 @@ export const CheckboxType: React.FC<FieldTypeProps> = ({ field, design, urlValue
         <Checkbox.Group>
           {field.options
             .filter((option) => option.key === null)
-            .map((option) => (
-              <StyledCheckbox design={design} value={option.value} key={option.value}>
+            .map((option, i) => (
+              <StyledCheckbox
+                design={design}
+                value={option.value}
+                key={option.value}
+                autoFocus={i === 0 && focus}
+              >
                 {option.title || option.value}
               </StyledCheckbox>
             ))}
diff --git a/components/form/types/checkbox/index.ts b/components/form/types/checkbox/index.ts
new file mode 100644
index 0000000..1fcdb25
--- /dev/null
+++ b/components/form/types/checkbox/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class CheckboxType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./checkbox.admin').then(c => c.CheckboxAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./checkbox.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/date.type.tsx b/components/form/types/date/date.admin.tsx
similarity index 91%
rename from components/form/admin/types/date.type.tsx
rename to components/form/types/date/date.admin.tsx
index d8d8463..5f19ae5 100644
--- a/components/form/admin/types/date.type.tsx
+++ b/components/form/types/date/date.admin.tsx
@@ -2,9 +2,9 @@ import { DatePicker, Form } from 'antd'
 import moment, { Moment } from 'moment'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const DateType: React.FC<AdminFieldTypeProps> = ({ field }) => {
+export const DateAdmin: React.FC<FieldAdminProps> = ({ field }) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/date.type.tsx b/components/form/types/date/date.input.tsx
similarity index 77%
rename from components/form/types/date.type.tsx
rename to components/form/types/date/date.input.tsx
index a57d1bd..0bf6cee 100644
--- a/components/form/types/date.type.tsx
+++ b/components/form/types/date/date.input.tsx
@@ -4,12 +4,20 @@ import debug from 'debug'
 import moment, { Moment } from 'moment'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledDateInput } from '../../styled/date.input'
-import { FieldTypeProps } from './type.props'
+import { StyledDateInput } from '../../../styled/date.input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/date')
+const logger = debug('date.input')
 
-export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function DateInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const [min, setMin] = useState<Dayjs>()
   const [max, setMax] = useState<Dayjs>()
   const { t } = useTranslation()
@@ -29,20 +37,20 @@ export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue, fo
 
   if (field.defaultValue) {
     try {
-      initialValue = moment(JSON.parse(field.defaultValue))
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = moment(urlValue)
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         getValueFromEvent={(e: Moment) => e.format('YYYY-MM-DD')}
         getValueProps={(e: string) => ({ value: e ? moment(e) : undefined })}
@@ -56,9 +64,11 @@ export const DateType: React.FC<FieldTypeProps> = ({ field, design, urlValue, fo
             if (min && min.isAfter(d.toDate())) {
               return true
             }
+
             if (max && max.isBefore(d.toDate())) {
               return true
             }
+
             return false
           }}
         />
diff --git a/components/form/types/date/index.ts b/components/form/types/date/index.ts
new file mode 100644
index 0000000..8244f90
--- /dev/null
+++ b/components/form/types/date/index.ts
@@ -0,0 +1,24 @@
+import moment, { Moment } from 'moment'
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class DateType extends AbstractType<Moment> {
+  parseValue(raw: string): Moment {
+    return moment(JSON.parse(raw))
+  }
+
+  parseUrlValue(raw: string): Moment {
+    return moment(raw)
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./date.admin').then(c => c.DateAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./date.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/dropdown.type.tsx b/components/form/types/dropdown/dropdown.admin.tsx
similarity index 95%
rename from components/form/admin/types/dropdown.type.tsx
rename to components/form/types/dropdown/dropdown.admin.tsx
index 012dfbd..0d6ca19 100644
--- a/components/form/admin/types/dropdown.type.tsx
+++ b/components/form/types/dropdown/dropdown.admin.tsx
@@ -1,9 +1,9 @@
 import { Button, Col, Form, Input, Row } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const DropdownType: React.FC<AdminFieldTypeProps> = (props) => {
+export const DropdownAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/dropdown.type.tsx b/components/form/types/dropdown/dropdown.input.tsx
similarity index 74%
rename from components/form/types/dropdown.type.tsx
rename to components/form/types/dropdown/dropdown.input.tsx
index 950eb49..2596157 100644
--- a/components/form/types/dropdown.type.tsx
+++ b/components/form/types/dropdown/dropdown.input.tsx
@@ -2,12 +2,20 @@ import { Form, Select } from 'antd'
 import debug from 'debug'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledSelect } from '../../styled/select'
-import { FieldTypeProps } from './type.props'
+import { StyledSelect } from '../../../styled/select'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
 const logger = debug('field/dropdown')
 
-export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function DateInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const [open, setOpen] = useState(false)
   const { t } = useTranslation()
 
@@ -15,20 +23,20 @@ export const DropdownType: React.FC<FieldTypeProps> = ({ field, design, urlValue
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
       >
diff --git a/components/form/types/dropdown/index.ts b/components/form/types/dropdown/index.ts
new file mode 100644
index 0000000..bf9c351
--- /dev/null
+++ b/components/form/types/dropdown/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class DropdownType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./dropdown.admin').then(c => c.DropdownAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./dropdown.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/email.type.tsx b/components/form/types/email/email.admin.tsx
similarity index 79%
rename from components/form/admin/types/email.type.tsx
rename to components/form/types/email/email.admin.tsx
index b833492..e015943 100644
--- a/components/form/admin/types/email.type.tsx
+++ b/components/form/types/email/email.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Input } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const EmailType: React.FC<AdminFieldTypeProps> = (props) => {
+export const EmailAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/email.type.tsx b/components/form/types/email/email.input.tsx
similarity index 61%
rename from components/form/types/email.type.tsx
rename to components/form/types/email/email.input.tsx
index 6fa2cc7..9151db4 100644
--- a/components/form/types/email.type.tsx
+++ b/components/form/types/email/email.input.tsx
@@ -2,32 +2,40 @@ import { Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledInput } from '../../styled/input'
-import { FieldTypeProps } from './type.props'
+import { StyledInput } from '../../../styled/input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/email')
+const logger = debug('email.input')
 
-export const EmailType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function EmailInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue = null
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[
           { required: field.required, message: t('validation:valueRequired') },
           { type: 'email', message: t('validation:invalidEmail') },
diff --git a/components/form/types/email/index.ts b/components/form/types/email/index.ts
new file mode 100644
index 0000000..9738926
--- /dev/null
+++ b/components/form/types/email/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class EmailType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./email.admin').then(c => c.EmailAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./email.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/type.props.ts b/components/form/types/field.admin.props.ts
similarity index 78%
rename from components/form/admin/types/type.props.ts
rename to components/form/types/field.admin.props.ts
index e86e5b9..26f9cdc 100644
--- a/components/form/admin/types/type.props.ts
+++ b/components/form/types/field.admin.props.ts
@@ -1,7 +1,7 @@
 import { FormInstance } from 'antd/lib/form'
 import { FieldData } from 'rc-field-form/lib/interface'
 
-export interface AdminFieldTypeProps {
+export interface FieldAdminProps {
   form: FormInstance
   field: FieldData
 }
diff --git a/components/form/types/field.input.builder.type.ts b/components/form/types/field.input.builder.type.ts
new file mode 100644
index 0000000..6e652b3
--- /dev/null
+++ b/components/form/types/field.input.builder.type.ts
@@ -0,0 +1,6 @@
+import { ComponentType } from 'react'
+
+import { AbstractType } from './abstract.type'
+import { FieldInputProps } from './field.input.props'
+
+export type FieldInputBuilderType<A = AbstractType> = (type: A) => ComponentType<FieldInputProps>
diff --git a/components/form/types/type.props.ts b/components/form/types/field.input.props.ts
similarity index 86%
rename from components/form/types/type.props.ts
rename to components/form/types/field.input.props.ts
index 7320593..92b414e 100644
--- a/components/form/types/type.props.ts
+++ b/components/form/types/field.input.props.ts
@@ -3,7 +3,7 @@ import {
   FormPublicFieldFragment,
 } from '../../../graphql/fragment/form.public.fragment'
 
-export interface FieldTypeProps {
+export interface FieldInputProps {
   field: FormPublicFieldFragment
   design: FormPublicDesignFragment
   focus?: boolean
diff --git a/components/form/admin/types/hidden.type.tsx b/components/form/types/hidden/hidden.admin.tsx
similarity index 75%
rename from components/form/admin/types/hidden.type.tsx
rename to components/form/types/hidden/hidden.admin.tsx
index b36e03b..95523bd 100644
--- a/components/form/admin/types/hidden.type.tsx
+++ b/components/form/types/hidden/hidden.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Input } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const HiddenType: React.FC<AdminFieldTypeProps> = (props) => {
+export const HiddenAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/hidden/index.ts b/components/form/types/hidden/index.ts
new file mode 100644
index 0000000..da22341
--- /dev/null
+++ b/components/form/types/hidden/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class HiddenType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./hidden.admin').then(c => c.HiddenAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return null;
+  }
+}
diff --git a/components/form/admin/types/image.type.tsx b/components/form/types/image/image.admin.tsx
similarity index 100%
rename from components/form/admin/types/image.type.tsx
rename to components/form/types/image/image.admin.tsx
diff --git a/components/form/types/image.type.tsx b/components/form/types/image/image.type.tsx
similarity index 100%
rename from components/form/types/image.type.tsx
rename to components/form/types/image/image.type.tsx
diff --git a/components/form/types/image/index.ts b/components/form/types/image/index.ts
new file mode 100644
index 0000000..a931518
--- /dev/null
+++ b/components/form/types/image/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class ImageType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./dropdown.admin').then(c => c.DropdownAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./dropdown.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/types/index.ts b/components/form/types/index.ts
index f61ce80..6bfadcb 100644
--- a/components/form/types/index.ts
+++ b/components/form/types/index.ts
@@ -1,31 +1,34 @@
-import React from 'react'
-import { CheckboxType } from './checkbox.type'
-import { DateType } from './date.type'
-import { DropdownType } from './dropdown.type'
-import { EmailType } from './email.type'
-import { LinkType } from './link.type'
-import { NumberType } from './number.type'
-import { RadioType } from './radio.type'
-import { RatingType } from './rating.type'
-import { SliderType } from './slider.type'
-import { TextType } from './text.type'
-import { TextareaType } from './textarea.type'
-import { FieldTypeProps } from './type.props'
-import { YesNoType } from './yes_no.type'
+import { AbstractType } from './abstract.type'
+import { CheckboxType } from './checkbox'
+import { DateType } from './date'
+import { DropdownType } from './dropdown'
+import { EmailType } from './email'
+import { HiddenType } from './hidden'
+import { LinkType } from './link'
+import { LocationType } from './location'
+import { NumberType } from './number'
+import { RadioType } from './radio'
+import { RatingType } from './rating'
+import { SliderType } from './slider'
+import { TextareaType } from './textarea'
+import { TextfieldType } from './textfield'
+import { YesNoType } from './yes_no'
 
 export const fieldTypes: {
-  [key: string]: React.FC<FieldTypeProps>
+  [key: string]: AbstractType
 } = {
-  date: DateType,
-  dropdown: DropdownType,
-  checkbox: CheckboxType,
-  email: EmailType,
-  link: LinkType,
-  number: NumberType,
-  radio: RadioType,
-  rating: RatingType,
-  slider: SliderType,
-  textarea: TextareaType,
-  textfield: TextType,
-  yes_no: YesNoType,
+  checkbox: new CheckboxType(),
+  date: new DateType(),
+  dropdown: new DropdownType(),
+  email: new EmailType(),
+  hidden: new HiddenType(),
+  link: new LinkType(),
+  location: new LocationType(),
+  number: new NumberType(),
+  radio: new RadioType(),
+  rating: new RatingType(),
+  slider: new SliderType(),
+  textarea: new TextareaType(),
+  textfield: new TextfieldType(),
+  yes_no: new YesNoType(),
 }
diff --git a/components/form/types/link/index.ts b/components/form/types/link/index.ts
new file mode 100644
index 0000000..1630c89
--- /dev/null
+++ b/components/form/types/link/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class LinkType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./link.admin').then(c => c.LinkAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./link.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/link.type.tsx b/components/form/types/link/link.admin.tsx
similarity index 79%
rename from components/form/admin/types/link.type.tsx
rename to components/form/types/link/link.admin.tsx
index 1a46ae6..3b02649 100644
--- a/components/form/admin/types/link.type.tsx
+++ b/components/form/types/link/link.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Input } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const LinkType: React.FC<AdminFieldTypeProps> = (props) => {
+export const LinkAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/link.type.tsx b/components/form/types/link/link.input.tsx
similarity index 61%
rename from components/form/types/link.type.tsx
rename to components/form/types/link/link.input.tsx
index 0396cfb..9766815 100644
--- a/components/form/types/link.type.tsx
+++ b/components/form/types/link/link.input.tsx
@@ -2,32 +2,40 @@ import { Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledInput } from '../../styled/input'
-import { FieldTypeProps } from './type.props'
+import { StyledInput } from '../../../styled/input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/link')
+const logger = debug('link.input')
 
-export const LinkType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function LinkInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue = null
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[
           { required: field.required, message: t('validation:valueRequired') },
           { type: 'url', message: t('validation:invalidUrl') },
diff --git a/components/form/types/location/index.ts b/components/form/types/location/index.ts
new file mode 100644
index 0000000..dda717f
--- /dev/null
+++ b/components/form/types/location/index.ts
@@ -0,0 +1,34 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class LocationType extends AbstractType<{ lat: number, lng: number }> {
+  parseUrlValue(raw: string): { lat: number; lng: number } {
+    if (raw.includes(',')) {
+      const [lat, lng] = raw.split(',')
+
+      return {
+        lat: parseFloat(lat),
+        lng: parseFloat(lng),
+      }
+    }
+
+    throw new Error('no separator found')
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./location.admin').then(c => c.LocationAdmin), { ssr: false });
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./location.input').then(c => c.builder(this)), { ssr: false });
+  }
+
+  stringifyValue(raw: string): string {
+    const data = this.parseValue(raw)
+
+    return `${data.lat}, ${data.lng}`
+  }
+}
diff --git a/components/form/admin/types/location.type.tsx b/components/form/types/location/location.admin.tsx
similarity index 95%
rename from components/form/admin/types/location.type.tsx
rename to components/form/types/location/location.admin.tsx
index 1a6e215..44b8665 100644
--- a/components/form/admin/types/location.type.tsx
+++ b/components/form/types/location/location.admin.tsx
@@ -3,9 +3,9 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import { DraggableMarker } from '../../../map/draggable.marker'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const LocationType: React.FC<AdminFieldTypeProps> = (props) => {
+export const LocationAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
@@ -105,7 +105,7 @@ export const LocationType: React.FC<AdminFieldTypeProps> = (props) => {
                   attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                   url={tiles}
                 />
-                {center.lat && center.lng && (
+                {center?.lat && center?.lng && (
                   <DraggableMarker
                     value={center}
                     onChange={next => {
diff --git a/components/form/types/location/location.input.tsx b/components/form/types/location/location.input.tsx
new file mode 100644
index 0000000..a278524
--- /dev/null
+++ b/components/form/types/location/location.input.tsx
@@ -0,0 +1,153 @@
+import { Alert, Form, InputNumber, Space, Spin } from 'antd'
+import debug from 'debug'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MapContainer, TileLayer } from 'react-leaflet'
+import { DraggableMarker } from '../../../map/draggable.marker'
+import { FieldInputBuilderType } from '../field.input.builder.type'
+
+const logger = debug('location.number')
+
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function LocationInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
+  const [initialZoom, setInitialZoom] = useState<number>(13)
+  const [tiles, setTiles] = useState<string>()
+  const [loading, setLoading] = useState(true)
+
+  const { t } = useTranslation()
+
+
+  useEffect(() => {
+    field.options.forEach((option) => {
+      if (option.key === 'initialZoom') {
+        try {
+          setInitialZoom(JSON.parse(option.value))
+        } catch (e) {
+          logger('invalid initialZoom value %O', e)
+        }
+      }
+
+      if (option.key === 'tiles') {
+        try {
+          setTiles(JSON.parse(option.value))
+        } catch (e) {
+          logger('invalid tiles value %O', e)
+        }
+      }
+    })
+
+    setLoading(false)
+  }, [field])
+
+  let initialValue: { lat: number, lng: number } = undefined
+
+  if (field.defaultValue) {
+    try {
+      initialValue = parseValue(field.defaultValue)
+    } catch (e) {
+      logger('invalid default value %O', e)
+    }
+  }
+
+  if (urlValue) {
+    try {
+      initialValue = parseUrlValue(urlValue)
+    } catch (e) {
+      logger('invalid url value %O', e)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div>
+        <Spin />
+      </div>
+    )
+  }
+
+  if (!tiles) {
+    return <Alert message={'Tiles missing!'} />
+  }
+
+  return (
+    <div>
+      <Form.Item>
+        <Space>
+          <Form.Item
+            rules={[{ required: field.required, message: t('validation:valueRequired') }]}
+            name={[
+              field.id,
+              'lat',
+            ]}
+            initialValue={initialValue?.lat}
+            noStyle
+          >
+            <InputNumber addonAfter={'LAT'} precision={7} step={0.00001} max={90} min={-90} />
+          </Form.Item>
+
+          <Form.Item
+            rules={[{ required: field.required, message: t('validation:valueRequired') }]}
+            name={[
+              field.id,
+              'lng',
+            ]}
+            initialValue={initialValue?.lng}
+            noStyle
+          >
+            <InputNumber addonAfter={'LNG'} precision={7} step={0.00001} max={180} min={-180} />
+          </Form.Item>
+        </Space>
+      </Form.Item>
+      <Form.Item dependencies={[[field.id, 'lat'], [field.id, 'lng']]}>
+        {(form) => {
+          const center = form.getFieldValue([field.id])
+
+          return (
+            <div>
+              <MapContainer
+                center={initialValue}
+                zoom={initialZoom}
+                style={{ height: 300, width: '100%' }}
+              >
+                <TileLayer
+                  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                  url={tiles}
+                />
+                {center.lat && center.lng && (
+                  <DraggableMarker
+                    value={center}
+                    onChange={next => {
+                      form.setFields([
+                        {
+                          name: [
+                            field.id,
+                            'lng',
+                          ],
+                          value: next.lng,
+                        },
+                        {
+                          name: [
+                            field.id,
+                            'lat',
+                          ],
+                          value: next.lat,
+                        },
+                      ])
+                    }}
+                  />
+                )}
+              </MapContainer>
+            </div>
+          )
+        }}
+      </Form.Item>
+    </div>
+  )
+}
diff --git a/components/form/types/map.type.tsx b/components/form/types/map.type.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/components/form/types/number/index.ts b/components/form/types/number/index.ts
new file mode 100644
index 0000000..a8411f7
--- /dev/null
+++ b/components/form/types/number/index.ts
@@ -0,0 +1,19 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class NumberType extends AbstractType<number> {
+  parseUrlValue(raw: string): number {
+    return parseFloat(raw)
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./number.admin').then(c => c.NumberAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./number.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/number.type.tsx b/components/form/types/number/number.admin.tsx
similarity index 76%
rename from components/form/admin/types/number.type.tsx
rename to components/form/types/number/number.admin.tsx
index e9e48c6..09c8553 100644
--- a/components/form/admin/types/number.type.tsx
+++ b/components/form/types/number/number.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, InputNumber } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const NumberType: React.FC<AdminFieldTypeProps> = (props) => {
+export const NumberAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/number.type.tsx b/components/form/types/number/number.input.tsx
similarity index 61%
rename from components/form/types/number.type.tsx
rename to components/form/types/number/number.input.tsx
index 03d245b..95b3546 100644
--- a/components/form/types/number.type.tsx
+++ b/components/form/types/number/number.input.tsx
@@ -2,32 +2,40 @@ import { Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledNumberInput } from '../../styled/number.input'
-import { FieldTypeProps } from './type.props'
+import { StyledNumberInput } from '../../../styled/number.input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/number')
+const logger = debug('number.input')
 
-export const NumberType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function NumberInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue: number = undefined
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = parseFloat(urlValue)
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[
           { type: 'number', message: t('validation:invalidNumber') },
           { required: field.required, message: t('validation:valueRequired') },
diff --git a/components/form/types/radio/index.ts b/components/form/types/radio/index.ts
new file mode 100644
index 0000000..419ec77
--- /dev/null
+++ b/components/form/types/radio/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class RadioType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./radio.admin').then(c => c.RadioAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./radio.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/radio.type.tsx b/components/form/types/radio/radio.admin.tsx
similarity index 95%
rename from components/form/admin/types/radio.type.tsx
rename to components/form/types/radio/radio.admin.tsx
index 47f6451..192baca 100644
--- a/components/form/admin/types/radio.type.tsx
+++ b/components/form/types/radio/radio.admin.tsx
@@ -1,9 +1,9 @@
 import { Button, Col, Form, Input, Row } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const RadioType: React.FC<AdminFieldTypeProps> = (props) => {
+export const RadioAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/radio.type.tsx b/components/form/types/radio/radio.input.tsx
similarity index 69%
rename from components/form/types/radio.type.tsx
rename to components/form/types/radio/radio.input.tsx
index 4cc1b9e..76f338c 100644
--- a/components/form/types/radio.type.tsx
+++ b/components/form/types/radio/radio.input.tsx
@@ -2,32 +2,40 @@ import { Form, Radio } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledRadio } from '../../styled/radio'
-import { FieldTypeProps } from './type.props'
+import { StyledRadio } from '../../../styled/radio'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/radio')
+const logger = debug('radio.input')
 
-export const RadioType: React.FC<FieldTypeProps> = ({ field, design, urlValue }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function RadioInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue: string = undefined
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.options
           .map((option) => option.value)
diff --git a/components/form/types/rating/index.ts b/components/form/types/rating/index.ts
new file mode 100644
index 0000000..9f4f213
--- /dev/null
+++ b/components/form/types/rating/index.ts
@@ -0,0 +1,19 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class RatingType extends AbstractType<number> {
+  parseUrlValue(raw: string): number {
+    return parseFloat(raw)
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./rating.admin').then(c => c.RatingAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./rating.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/rating.type.tsx b/components/form/types/rating/rating.admin.tsx
similarity index 78%
rename from components/form/admin/types/rating.type.tsx
rename to components/form/types/rating/rating.admin.tsx
index 9c8b2ee..2c54ab2 100644
--- a/components/form/admin/types/rating.type.tsx
+++ b/components/form/types/rating/rating.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Rate } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const RatingType: React.FC<AdminFieldTypeProps> = (props) => {
+export const RatingAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/rating.type.tsx b/components/form/types/rating/rating.input.tsx
similarity index 60%
rename from components/form/types/rating.type.tsx
rename to components/form/types/rating/rating.input.tsx
index a19bad8..d657d98 100644
--- a/components/form/types/rating.type.tsx
+++ b/components/form/types/rating/rating.input.tsx
@@ -2,31 +2,39 @@ import { Form, Rate } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { FieldTypeProps } from './type.props'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/rating')
+const logger = debug('rating.input')
 
-export const RatingType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function RatingInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue: number = undefined
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = parseFloat(urlValue)
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
       >
diff --git a/components/form/types/slider/index.ts b/components/form/types/slider/index.ts
new file mode 100644
index 0000000..99ce0bc
--- /dev/null
+++ b/components/form/types/slider/index.ts
@@ -0,0 +1,19 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class SliderType extends AbstractType<number> {
+  parseUrlValue(raw: string): number {
+    return parseFloat(raw)
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./slider.admin').then(c => c.SliderAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./slider.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/slider.type.tsx b/components/form/types/slider/slider.admin.tsx
similarity index 94%
rename from components/form/admin/types/slider.type.tsx
rename to components/form/types/slider/slider.admin.tsx
index ef86b99..db7504a 100644
--- a/components/form/admin/types/slider.type.tsx
+++ b/components/form/types/slider/slider.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, InputNumber, Slider } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const SliderType: React.FC<AdminFieldTypeProps> = (props) => {
+export const SliderAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/slider.type.tsx b/components/form/types/slider/slider.input.tsx
similarity index 80%
rename from components/form/types/slider.type.tsx
rename to components/form/types/slider/slider.input.tsx
index 34eceeb..ea9d0cc 100644
--- a/components/form/types/slider.type.tsx
+++ b/components/form/types/slider/slider.input.tsx
@@ -2,11 +2,19 @@ import { Form, Slider, Spin } from 'antd'
 import debug from 'debug'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FieldTypeProps } from './type.props'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/slider')
+const logger = debug('slider.input')
 
-export const SliderType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function SliderInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const [min, setMin] = useState<number>()
   const [max, setMax] = useState<number>()
   const [step, setStep] = useState<number>()
@@ -46,14 +54,14 @@ export const SliderType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = parseFloat(urlValue)
+    initialValue = parseUrlValue(urlValue)
   }
 
   if (loading) {
@@ -67,11 +75,12 @@ export const SliderType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
       >
         <Slider
+          autoFocus={focus}
           min={min}
           max={max}
           step={step}
diff --git a/components/form/types/textarea/index.ts b/components/form/types/textarea/index.ts
new file mode 100644
index 0000000..eedb92d
--- /dev/null
+++ b/components/form/types/textarea/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class TextareaType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./textarea.admin').then(c => c.TextareaAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./textarea.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/textarea.type.tsx b/components/form/types/textarea/textarea.admin.tsx
similarity index 76%
rename from components/form/admin/types/textarea.type.tsx
rename to components/form/types/textarea/textarea.admin.tsx
index 11c4f0b..0e12aad 100644
--- a/components/form/admin/types/textarea.type.tsx
+++ b/components/form/types/textarea/textarea.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Input } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const TextareaType: React.FC<AdminFieldTypeProps> = (props) => {
+export const TextareaAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/textarea.type.tsx b/components/form/types/textarea/textarea.input.tsx
similarity index 57%
rename from components/form/types/textarea.type.tsx
rename to components/form/types/textarea/textarea.input.tsx
index 7102ebe..e47ee66 100644
--- a/components/form/types/textarea.type.tsx
+++ b/components/form/types/textarea/textarea.input.tsx
@@ -2,32 +2,40 @@ import { Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledTextareaInput } from '../../styled/textarea.input'
-import { FieldTypeProps } from './type.props'
+import { StyledTextareaInput } from '../../../styled/textarea.input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/textarea')
+const logger = debug('textarea.input')
 
-export const TextareaType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function TextareaInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
   let initialValue = undefined
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
       >
diff --git a/components/form/types/textfield/index.ts b/components/form/types/textfield/index.ts
new file mode 100644
index 0000000..ae616e8
--- /dev/null
+++ b/components/form/types/textfield/index.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class TextfieldType extends AbstractType<string> {
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./textfield.admin').then(c => c.TextfieldAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./textfield.input').then(c => c.builder(this)));
+  }
+}
diff --git a/components/form/admin/types/text.type.tsx b/components/form/types/textfield/textfield.admin.tsx
similarity index 73%
rename from components/form/admin/types/text.type.tsx
rename to components/form/types/textfield/textfield.admin.tsx
index 6c2253e..d232073 100644
--- a/components/form/admin/types/text.type.tsx
+++ b/components/form/types/textfield/textfield.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Input } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const TextType: React.FC<AdminFieldTypeProps> = (props) => {
+export const TextfieldAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/text.type.tsx b/components/form/types/textfield/textfield.input.tsx
similarity index 50%
rename from components/form/types/text.type.tsx
rename to components/form/types/textfield/textfield.input.tsx
index e1988f3..f6e40a9 100644
--- a/components/form/types/text.type.tsx
+++ b/components/form/types/textfield/textfield.input.tsx
@@ -2,12 +2,20 @@ import { Form } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyledInput } from '../../styled/input'
-import { FieldTypeProps } from './type.props'
+import { StyledInput } from '../../../styled/input'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/text')
+const logger = debug('textfield.input')
 
-export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue, focus }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function TextfieldInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
   // TODO focus when becomes visible
 
@@ -15,24 +23,29 @@ export const TextType: React.FC<FieldTypeProps> = ({ field, design, urlValue, fo
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue) {
-    initialValue = urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
       >
-        <StyledInput autoFocus={focus} design={design} allowClear size={'large'} />
+        <StyledInput
+          autoFocus={focus}
+          design={design}
+          allowClear
+          size={'large'}
+        />
       </Form.Item>
     </div>
   )
diff --git a/components/form/types/yes_no/index.tsx b/components/form/types/yes_no/index.tsx
new file mode 100644
index 0000000..3d853f8
--- /dev/null
+++ b/components/form/types/yes_no/index.tsx
@@ -0,0 +1,36 @@
+import { Tag } from 'antd'
+import dynamic from 'next/dynamic'
+import React, { ComponentType } from 'react'
+import { AbstractType } from '../abstract.type'
+import { FieldAdminProps } from '../field.admin.props'
+import { FieldInputProps } from '../field.input.props'
+
+export class YesNoType extends AbstractType<boolean> {
+  parseUrlValue(raw: string): boolean {
+    return !!raw
+  }
+
+  adminFormField(): ComponentType<FieldAdminProps> {
+    return dynamic(() => import('./yes_no.admin').then(c => c.YesNoAdmin));
+  }
+
+  inputFormField(): ComponentType<FieldInputProps> {
+    return dynamic(() => import('./yes_no.input').then(c => c.builder(this)));
+  }
+
+  stringifyValue(raw: string): string {
+    if (this.parseValue(raw)) {
+      return 'YES'
+    } else {
+      return 'NO'
+    }
+  }
+
+  displayValue(raw: string): JSX.Element {
+    if (this.parseValue(raw)) {
+      return <Tag color={'green'}>YES</Tag>
+    } else {
+      return <Tag color={'red'}>NO</Tag>
+    }
+  }
+}
diff --git a/components/form/admin/types/yes_no.type.tsx b/components/form/types/yes_no/yes_no.admin.tsx
similarity index 77%
rename from components/form/admin/types/yes_no.type.tsx
rename to components/form/types/yes_no/yes_no.admin.tsx
index a39633d..a3a6524 100644
--- a/components/form/admin/types/yes_no.type.tsx
+++ b/components/form/types/yes_no/yes_no.admin.tsx
@@ -1,9 +1,9 @@
 import { Form, Switch } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { AdminFieldTypeProps } from './type.props'
+import { FieldAdminProps } from '../field.admin.props'
 
-export const YesNoType: React.FC<AdminFieldTypeProps> = (props) => {
+export const YesNoAdmin: React.FC<FieldAdminProps> = (props) => {
   const { t } = useTranslation()
 
   return (
diff --git a/components/form/types/yes_no.type.tsx b/components/form/types/yes_no/yes_no.input.tsx
similarity index 61%
rename from components/form/types/yes_no.type.tsx
rename to components/form/types/yes_no/yes_no.input.tsx
index ac9313b..c28c1a6 100644
--- a/components/form/types/yes_no.type.tsx
+++ b/components/form/types/yes_no/yes_no.input.tsx
@@ -2,11 +2,19 @@ import { Form, Switch } from 'antd'
 import debug from 'debug'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { FieldTypeProps } from './type.props'
+import { FieldInputBuilderType } from '../field.input.builder.type'
 
-const logger = debug('field/link')
+const logger = debug('yes_no.input')
 
-export const YesNoType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
+export const builder: FieldInputBuilderType = ({
+  parseUrlValue,
+  parseValue,
+}) => function YesNoInput ({
+  field,
+  design,
+  urlValue,
+  focus,
+}) {
   const { t } = useTranslation()
 
 
@@ -14,20 +22,20 @@ export const YesNoType: React.FC<FieldTypeProps> = ({ field, urlValue }) => {
 
   if (field.defaultValue) {
     try {
-      initialValue = JSON.parse(field.defaultValue)
+      initialValue = parseValue(field.defaultValue)
     } catch (e) {
       logger('invalid default value %O', e)
     }
   }
 
   if (urlValue !== undefined) {
-    initialValue = !!urlValue
+    initialValue = parseUrlValue(urlValue)
   }
 
   return (
     <div>
       <Form.Item
-        name={[field.id, 'value']}
+        name={[field.id]}
         rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={initialValue}
         valuePropName={'checked'}
diff --git a/components/use.submission.ts b/components/use.submission.ts
index fed587f..0342832 100644
--- a/components/use.submission.ts
+++ b/components/use.submission.ts
@@ -1,6 +1,11 @@
 import { useMutation } from '@apollo/client'
 import debug from 'debug'
 import { useCallback, useEffect, useState } from 'react'
+import {
+  SUBMISSION_FINISH_MUTATION,
+  SubmissionFinishMutationData,
+  SubmissionFinishMutationVariables,
+} from '../graphql/mutation/submission.finish.mutation'
 import {
   SUBMISSION_SET_FIELD_MUTATION,
   SubmissionSetFieldMutationData,
@@ -11,11 +16,6 @@ import {
   SubmissionStartMutationData,
   SubmissionStartMutationVariables,
 } from '../graphql/mutation/submission.start.mutation'
-import {
-  SUBMISSION_FINISH_MUTATION,
-  SubmissionFinishMutationData,
-  SubmissionFinishMutationVariables,
-} from '../graphql/mutation/submission.finish.mutation'
 
 const logger = debug('useSubmission')
 
@@ -65,8 +65,12 @@ export const useSubmission = (formId: string): Submission => {
   }, [formId])
 
   const setField = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async (fieldId: string, data: any) => {
+    async (fieldId: string, data: unknown) => {
+      if (data === undefined || data === null) {
+        logger('skip save field id=%O %O', fieldId, data)
+        return
+      }
+
       logger('save field id=%O %O', fieldId, data)
       await save({
         variables: {
diff --git a/pages/admin/forms/create.tsx b/pages/admin/forms/create.tsx
index 8221e1f..b5bdec4 100644
--- a/pages/admin/forms/create.tsx
+++ b/pages/admin/forms/create.tsx
@@ -82,7 +82,6 @@ const Create: NextPage = () => {
           noStyle
           name={[
             'form',
-            'design',
             'layout',
           ]}
           initialValue={'card'}