diff --git a/dist/bundle.js b/dist/bundle.js
index a5a66a7..c3159eb 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -21055,32 +21055,50 @@
             field: { type: n, validator: a, openValidator: r, converter: l, noSearch: i },
             setField: o,
           } = t,
-          [c, s] = (0, e.useState)(0),
-          u = (0, e.useRef)(null),
-          m = (0, e.useCallback)(() => {
-            if (u.current) {
-              const e = r ? ''.concat(u.current.scrollHeight, 'px') : '0px';
-              s(e);
+          {
+            preview: { mode: c },
+          } = u(),
+          [s, m] = (0, e.useState)(0),
+          d = (0, e.useRef)(null),
+          p = (0, e.useCallback)(() => {
+            if (d.current) {
+              const e = r ? ''.concat(d.current.scrollHeight, 'px') : '0px';
+              m(e);
             }
           }, [r]);
         (0, e.useEffect)(() => {
-          m(), window.addEventListener('resize', m);
+          p(), window.addEventListener('resize', p);
           const e = new ResizeObserver((e) => {
-              const t = u.current;
-              for (let n of e) n.target === t && m();
+              const t = d.current;
+              for (let n of e) n.target === t && p();
             }),
-            t = u.current;
+            t = d.current;
           return (
             t && e.observe(t),
             () => {
-              window.removeEventListener('resize', m), t && e.unobserve(t);
+              window.removeEventListener('resize', p), t && e.unobserve(t);
             }
           );
-        }, [m]);
-        const d = (0, e.useMemo)(() => ['text', 'textarea', 'checkbox', 'selectbox', 'radioButton'].includes(n), [n]),
-          p = (0, e.useCallback)(() => {
-            o((e) => ({ ...e, validator: [...e.validator, { option: '', value: '', message: '' }] })), setTimeout(m, 0);
-          }, [o, m]);
+        }, [p]);
+        const f = (0, e.useMemo)(
+            () =>
+              [
+                'text',
+                'tel',
+                'number',
+                'email',
+                'password',
+                'textarea',
+                'liteEditor',
+                'checkbox',
+                'selectbox',
+                'radioButton',
+              ].includes(n),
+            [n]
+          ),
+          h = (0, e.useCallback)(() => {
+            o((e) => ({ ...e, validator: [...e.validator, { option: '', value: '', message: '' }] })), setTimeout(p, 0);
+          }, [o, p]);
         return e.createElement(
           'div',
           null,
@@ -21102,11 +21120,11 @@
           ),
           e.createElement(
             'div',
-            { className: 'customFieldAccordionContent '.concat(r ? '-open' : ''), style: { maxHeight: c }, ref: u },
+            { className: 'customFieldAccordionContent '.concat(r ? '-open' : ''), style: { maxHeight: s }, ref: d },
             e.createElement(
               'div',
               { className: 'customFieldValidatorArea' },
-              d &&
+              f &&
                 e.createElement(
                   'div',
                   null,
@@ -21348,10 +21366,12 @@
               e.createElement(
                 'div',
                 null,
-                e.createElement('button', { onClick: p, className: 'acms-admin-btn' }, '追加')
+                e.createElement('button', { onClick: h, className: 'acms-admin-btn' }, '追加')
               ),
-              /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(n) &&
-                e.createElement(bi, { noSearch: i, setField: o })
+              ('customfield' === c) | ('customunit' === c) &&
+                /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(n)
+                ? e.createElement(bi, { noSearch: i, setField: o })
+                : e.createElement(e.Fragment, null)
             )
           )
         );
@@ -22159,10 +22179,7 @@
               ),
             'file' === t.type && e.createElement('div', null, e.createElement(ki, { field: t, setField: n })),
             'richEditor' === t.type && e.createElement('div', null, e.createElement(Si, { field: t, setField: n })),
-            'media' !== t.type &&
-              'richEditor' !== t.type &&
-              'table' !== t.type &&
-              e.createElement(Ei, { field: t, setField: n }),
+            e.createElement(Ei, { field: t, setField: n }),
             e.createElement(vi, {
               setField: n,
               onSubmit: (e) => {
@@ -23092,9 +23109,9 @@
                   i ? { 'data-validator': n.name } : {}
                 )
               ),
-              e.createElement('input', { type: 'hidden', name: 'field[]', defaultValue: n.name }),
               e.createElement(Bi, { item: n }),
-              e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch }),
+              e.createElement('input', { type: 'hidden', name: 'field[]', defaultValue: n.name })
             ),
           'fieldgroup' === l &&
             e.createElement(
@@ -23127,17 +23144,24 @@
                   n.placeholder ? { placeholder: n.placeholder } : {}
                 )
               ),
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch }),
               e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') })
             ),
           'unitgroup' === l &&
             e.createElement(
-              'input',
-              Mi(
-                { type: n.type, name: ''.concat(n.name, '{id}[]') },
-                r && { value: '{'.concat(n.name, '}') },
-                { className: p()({ 'acms-admin-form-width-full': o }) },
-                n.placeholder ? { placeholder: n.placeholder } : {}
-              )
+              e.Fragment,
+              null,
+              e.createElement(
+                'input',
+                Mi(
+                  { type: n.type, name: ''.concat(n.name, '{id}[]') },
+                  r && { value: '{'.concat(n.name, '}') },
+                  { className: p()({ 'acms-admin-form-width-full': o }) },
+                  n.placeholder ? { placeholder: n.placeholder } : {}
+                )
+              ),
+              e.createElement(Bi, { item: n })
             )
         );
       }
@@ -23163,8 +23187,9 @@
                 ),
                 r ? '{'.concat(n.name, '}') : ''
               ),
-              e.createElement('input', { type: 'hidden', name: 'field[]', defaultValue: n.name }),
-              e.createElement(Bi, { item: n })
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch }),
+              e.createElement('input', { type: 'hidden', name: 'field[]', defaultValue: n.name })
             ),
           'fieldgroup' === l &&
             e.createElement(
@@ -23192,8 +23217,9 @@
                 ),
                 r ? '{'.concat(n.name, '}') : ''
               ),
-              e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') }),
-              e.createElement(Bi, { item: n })
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch }),
+              e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') })
             ),
           'unitgroup' === l &&
             e.createElement(
@@ -23284,25 +23310,31 @@
                 )
               ),
               e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') }),
-              e.createElement(Bi, { item: n })
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
             ),
           'unitgroup' === l &&
             e.createElement(
-              'select',
-              { name: ''.concat(n.name, '{id}[]'), className: p()({ 'acms-admin-form-width-full': i }) },
-              e.createElement('option', { value: '' }),
-              n.option.map((t, a) =>
-                t.label
-                  ? e.createElement(
-                      'option',
-                      Mi(
-                        { key: a, value: t.value },
-                        r && { 'data-tmp': '{'.concat(n.name, ':selected#').concat(t.value, '}') }
-                      ),
-                      t.label
-                    )
-                  : null
-              )
+              e.Fragment,
+              null,
+              e.createElement(
+                'select',
+                { name: ''.concat(n.name, '{id}[]'), className: p()({ 'acms-admin-form-width-full': i }) },
+                e.createElement('option', { value: '' }),
+                n.option.map((t, a) =>
+                  t.label
+                    ? e.createElement(
+                        'option',
+                        Mi(
+                          { key: a, value: t.value },
+                          r && { 'data-tmp': '{'.concat(n.name, ':selected#').concat(t.value, '}') }
+                        ),
+                        t.label
+                      )
+                    : null
+                )
+              ),
+              e.createElement(Bi, { item: n })
             )
         );
       }
@@ -23397,7 +23429,8 @@
                   : null
               ),
               e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') }),
-              e.createElement(Bi, { item: n })
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
             ),
           'unitgroup' === r &&
             e.createElement(
@@ -23520,7 +23553,8 @@
                   : null
               ),
               e.createElement('input', { type: 'hidden', name: 'unit{id}[]', value: ''.concat(n.name, '{id}') }),
-              e.createElement(Bi, { item: n })
+              e.createElement(Bi, { item: n }),
+              e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
             ),
           'unitgroup' === r &&
             e.createElement(
@@ -23691,7 +23725,8 @@
                 className: 'js-value',
               }),
               e.createElement('input', { type: 'hidden', name: 'field[]', value: n.name }),
-              e.createElement('input', { type: 'hidden', name: ''.concat(n.name, ':extension'), value: 'media' })
+              e.createElement('input', { type: 'hidden', name: ''.concat(n.name, ':extension'), value: 'media' }),
+              e.createElement(Bi, { item: n })
             ),
           'fieldgroup' === o &&
             e.createElement(
@@ -24192,8 +24227,7 @@
                     value: n.squareSize,
                   }),
                 e.createElement('input', { type: 'hidden', name: ''.concat(n.name, '@filename'), value: '' }),
-                e.createElement(Bi, { item: n }),
-                e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
+                e.createElement(Bi, { item: n })
               ),
             'fieldgroup' === o &&
               e.createElement(
@@ -24473,7 +24507,7 @@
                       name: ''.concat(n.name, '{id}@').concat(n.square, '[]'),
                       value: n.squareSize,
                     }),
-                  r && e.createElement(Bi, { item: n })
+                  e.createElement(Bi, { item: n })
                 )
               )
           )
@@ -24562,7 +24596,7 @@
                     name: ''.concat(n.name, '@filename'),
                     value: '@rawfilename',
                   }),
-                e.createElement(Vi, { name: n.name, noSearch: n.noSearch })
+                e.createElement(Bi, { item: n })
               ),
             'fieldgroup' === o &&
               e.createElement(
@@ -25441,6 +25475,10 @@
               t.map((t, n) => {
                 switch (t.type) {
                   case 'text':
+                  case 'tel':
+                  case 'number':
+                  case 'email':
+                  case 'password':
                     return e.createElement(
                       'tr',
                       { key: n },
@@ -25448,6 +25486,7 @@
                       e.createElement('td', null, e.createElement(qi, { item: t, id: ''.concat(t.name).concat(n) }))
                     );
                   case 'textarea':
+                  case 'liteEditor':
                     return e.createElement(
                       'tr',
                       { key: n },
@@ -25570,6 +25609,10 @@
                     (() => {
                       switch (t.type) {
                         case 'text':
+                        case 'tel':
+                        case 'number':
+                        case 'email':
+                        case 'password':
                           return e.createElement(
                             e.Fragment,
                             null,
@@ -25588,6 +25631,7 @@
                             )
                           );
                         case 'textarea':
+                        case 'liteEditor':
                           return e.createElement(
                             e.Fragment,
                             null,
@@ -25823,6 +25867,10 @@
                                   (() => {
                                     switch (t.type) {
                                       case 'text':
+                                      case 'tel':
+                                      case 'number':
+                                      case 'email':
+                                      case 'password':
                                         return e.createElement(
                                           e.Fragment,
                                           null,
@@ -25841,6 +25889,7 @@
                                           )
                                         );
                                       case 'textarea':
+                                      case 'liteEditor':
                                         return e.createElement(
                                           e.Fragment,
                                           null,
@@ -26337,6 +26386,10 @@
                               t.items.map((t, n) => {
                                 switch (t.type) {
                                   case 'text':
+                                  case 'tel':
+                                  case 'number':
+                                  case 'email':
+                                  case 'password':
                                     return e.createElement(
                                       no,
                                       { title: t.title },
@@ -26347,6 +26400,7 @@
                                       )
                                     );
                                   case 'textarea':
+                                  case 'liteEditor':
                                     return e.createElement(
                                       no,
                                       { title: t.title },
@@ -26490,6 +26544,10 @@
                                     t.items.map((t, n) => {
                                       switch (t.type) {
                                         case 'text':
+                                        case 'tel':
+                                        case 'number':
+                                        case 'email':
+                                        case 'password':
                                           return e.createElement(
                                             no,
                                             { title: t.title },
@@ -26504,6 +26562,7 @@
                                             )
                                           );
                                         case 'textarea':
+                                        case 'liteEditor':
                                           return e.createElement(
                                             no,
                                             { title: t.title },
@@ -26869,6 +26928,10 @@
               t.map((t, n) => {
                 switch (t.type) {
                   case 'text':
+                  case 'tel':
+                  case 'number':
+                  case 'email':
+                  case 'password':
                     return e.createElement(
                       'div',
                       {
@@ -26894,6 +26957,7 @@
                       )
                     );
                   case 'textarea':
+                  case 'liteEditor':
                     return e.createElement(
                       'div',
                       {
@@ -27137,6 +27201,10 @@
               t.map((t, n) => {
                 switch (t.type) {
                   case 'text':
+                  case 'tel':
+                  case 'number':
+                  case 'email':
+                  case 'password':
                     return e.createElement(
                       'tr',
                       { key: n },
@@ -27144,6 +27212,7 @@
                       e.createElement('td', null, e.createElement(qi, { item: t, id: ''.concat(t.name).concat(n) }))
                     );
                   case 'textarea':
+                  case 'liteEditor':
                     return e.createElement(
                       'tr',
                       { key: n },
@@ -27266,6 +27335,10 @@
                     (() => {
                       switch (t.type) {
                         case 'text':
+                        case 'tel':
+                        case 'number':
+                        case 'email':
+                        case 'password':
                           return e.createElement(
                             e.Fragment,
                             null,
@@ -27284,6 +27357,7 @@
                             )
                           );
                         case 'textarea':
+                        case 'liteEditor':
                           return e.createElement(
                             e.Fragment,
                             null,
@@ -27521,6 +27595,10 @@
                                   (() => {
                                     switch (t.type) {
                                       case 'text':
+                                      case 'tel':
+                                      case 'number':
+                                      case 'email':
+                                      case 'password':
                                         return e.createElement(
                                           e.Fragment,
                                           null,
@@ -27539,6 +27617,7 @@
                                           )
                                         );
                                       case 'textarea':
+                                      case 'liteEditor':
                                         return e.createElement(
                                           e.Fragment,
                                           null,
@@ -28010,6 +28089,10 @@
                       t.items.map((t, n) => {
                         switch (t.type) {
                           case 'text':
+                          case 'tel':
+                          case 'number':
+                          case 'email':
+                          case 'password':
                             return e.createElement(
                               no,
                               { title: t.title },
@@ -28020,6 +28103,7 @@
                               )
                             );
                           case 'textarea':
+                          case 'liteEditor':
                             return e.createElement(
                               no,
                               { title: t.title },
@@ -28163,6 +28247,10 @@
                             t.items.map((t, n) => {
                               switch (t.type) {
                                 case 'text':
+                                case 'tel':
+                                case 'number':
+                                case 'email':
+                                case 'password':
                                   return e.createElement(
                                     no,
                                     { title: t.title },
@@ -28173,6 +28261,7 @@
                                     )
                                   );
                                 case 'textarea':
+                                case 'liteEditor':
                                   return e.createElement(
                                     no,
                                     { title: t.title },
diff --git a/lib/components/genelator/Field.js b/lib/components/genelator/Field.js
index b563641..08f6cc8 100644
--- a/lib/components/genelator/Field.js
+++ b/lib/components/genelator/Field.js
@@ -216,13 +216,10 @@ function Field() {
             setField: setField,
           })
         ),
-      field.type !== 'media' &&
-        field.type !== 'richEditor' &&
-        field.type !== 'table' &&
-        /*#__PURE__*/ _react.default.createElement(_Validator.Validator, {
-          field: field,
-          setField: setField,
-        }),
+      /*#__PURE__*/ _react.default.createElement(_Validator.Validator, {
+        field: field,
+        setField: setField,
+      }),
       /*#__PURE__*/ _react.default.createElement(_Operator.Operator, {
         setField: setField,
         onSubmit: onSubmit,
diff --git a/lib/components/genelator/base/Validator.js b/lib/components/genelator/base/Validator.js
index d246c2a..4a7439f 100644
--- a/lib/components/genelator/base/Validator.js
+++ b/lib/components/genelator/base/Validator.js
@@ -8,6 +8,7 @@ exports.Validator = Validator;
 var _react = _interopRequireWildcard(require('react'));
 var _reactTooltip = _interopRequireDefault(require('react-tooltip'));
 var _NoSearchBox = require('./NoSearchBox');
+var _MakerContext = require('../../../store/MakerContext');
 function _getRequireWildcardCache(e) {
   if ('function' != typeof WeakMap) return null;
   var r = new WeakMap(),
@@ -35,6 +36,9 @@ function Validator(props) {
     field: { type, validator, openValidator, converter, noSearch },
     setField,
   } = props;
+  const {
+    preview: { mode },
+  } = (0, _MakerContext.useMakerContext)();
   const [height, setHeight] = (0, _react.useState)(0);
   const contentRef = (0, _react.useRef)(null);
   const updateHeight = (0, _react.useCallback)(() => {
@@ -66,7 +70,18 @@ function Validator(props) {
     };
   }, [updateHeight]);
   const isConverter = (0, _react.useMemo)(() => {
-    const possibleConverter = ['text', 'textarea', 'checkbox', 'selectbox', 'radioButton'];
+    const possibleConverter = [
+      'text',
+      'tel',
+      'number',
+      'email',
+      'password',
+      'textarea',
+      'liteEditor',
+      'checkbox',
+      'selectbox',
+      'radioButton',
+    ];
     return possibleConverter.includes(type);
   }, [type]);
   const updateValidatorOption = (idx, option) => {
@@ -517,11 +532,13 @@ function Validator(props) {
             '\u8FFD\u52A0'
           )
         ),
-        /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type) &&
-          /*#__PURE__*/ _react.default.createElement(_NoSearchBox.NoSearchBox, {
-            noSearch: noSearch,
-            setField: setField,
-          })
+        (mode === 'customfield') | (mode === 'customunit') &&
+          /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type)
+          ? /*#__PURE__*/ _react.default.createElement(_NoSearchBox.NoSearchBox, {
+              noSearch: noSearch,
+              setField: setField,
+            })
+          : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null)
       )
     )
   );
diff --git a/lib/components/html/Checkbox.js b/lib/components/html/Checkbox.js
index ef5ade3..e49d7fd 100644
--- a/lib/components/html/Checkbox.js
+++ b/lib/components/html/Checkbox.js
@@ -157,6 +157,10 @@ function Checkbox(props) {
         }),
         /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
           item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
         })
       ),
     mode === 'unitgroup' &&
diff --git a/lib/components/html/FileInput.js b/lib/components/html/FileInput.js
index 1f86424..c244437 100644
--- a/lib/components/html/FileInput.js
+++ b/lib/components/html/FileInput.js
@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require('react'));
 var _classnames = _interopRequireDefault(require('classnames'));
 var _MakerContext = require('../../store/MakerContext');
 var _OptionValidator = require('./OptionValidator');
-var _OptionNoSearch = require('./OptionNoSearch');
 function FileInput(props) {
   const { item, id, isValue = true } = props;
   const {
@@ -125,9 +124,8 @@ function FileInput(props) {
             name: ''.concat(item.name, '@filename'),
             value: '@rawfilename',
           }),
-        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
-          name: item.name,
-          noSearch: item.noSearch,
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
         })
       ),
     mode === 'fieldgroup' &&
diff --git a/lib/components/html/ImageInput.js b/lib/components/html/ImageInput.js
index dff3bf5..8d95031 100644
--- a/lib/components/html/ImageInput.js
+++ b/lib/components/html/ImageInput.js
@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require('react'));
 var _classnames = _interopRequireDefault(require('classnames'));
 var _MakerContext = require('../../store/MakerContext');
 var _OptionValidator = require('./OptionValidator');
-var _OptionNoSearch = require('./OptionNoSearch');
 function ImageInput(props) {
   const { item, id, isAttribute = true } = props;
   const {
@@ -161,10 +160,6 @@ function ImageInput(props) {
         }),
         /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
           item: item,
-        }),
-        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
-          name: item.name,
-          noSearch: item.noSearch,
         })
       ),
     mode === 'fieldgroup' &&
@@ -529,10 +524,9 @@ function ImageInput(props) {
               name: ''.concat(item.name, '{id}@').concat(item.square, '[]'),
               value: item.squareSize,
             }),
-          isAttribute &&
-            /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
-              item: item,
-            })
+          /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+            item: item,
+          })
         )
       )
   );
diff --git a/lib/components/html/Media.js b/lib/components/html/Media.js
index af63e9a..868f8ae 100644
--- a/lib/components/html/Media.js
+++ b/lib/components/html/Media.js
@@ -216,6 +216,9 @@ function Media(props) {
           type: 'hidden',
           name: ''.concat(item.name, ':extension'),
           value: 'media',
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
         })
       ),
     mode === 'fieldgroup' &&
diff --git a/lib/components/html/RadioButton.js b/lib/components/html/RadioButton.js
index 6b48109..1b79156 100644
--- a/lib/components/html/RadioButton.js
+++ b/lib/components/html/RadioButton.js
@@ -158,6 +158,10 @@ function RadioButton(props) {
         }),
         /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
           item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
         })
       ),
     mode === 'unitgroup' &&
diff --git a/lib/components/html/Selectbox.js b/lib/components/html/Selectbox.js
index 9421572..ccfb729 100644
--- a/lib/components/html/Selectbox.js
+++ b/lib/components/html/Selectbox.js
@@ -136,37 +136,48 @@ function Selectbox(props) {
         }),
         /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
           item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
         })
       ),
     mode === 'unitgroup' &&
       /*#__PURE__*/ _react.default.createElement(
-        'select',
-        {
-          name: ''.concat(item.name, '{id}[]'),
-          className: (0, _classnames.default)({
-            'acms-admin-form-width-full': acmscss,
+        _react.default.Fragment,
+        null,
+        /*#__PURE__*/ _react.default.createElement(
+          'select',
+          {
+            name: ''.concat(item.name, '{id}[]'),
+            className: (0, _classnames.default)({
+              'acms-admin-form-width-full': acmscss,
+            }),
+          },
+          /*#__PURE__*/ _react.default.createElement('option', {
+            value: '',
           }),
-        },
-        /*#__PURE__*/ _react.default.createElement('option', {
-          value: '',
-        }),
-        item.option.map((option, index) => {
-          if (!option.label) {
-            return null;
-          }
-          return /*#__PURE__*/ _react.default.createElement(
-            'option',
-            (0, _extends2.default)(
-              {
-                key: index,
-                value: option.value,
-              },
-              isSelected && {
-                'data-tmp': '{'.concat(item.name, ':selected#').concat(option.value, '}'),
-              }
-            ),
-            option.label
-          );
+          item.option.map((option, index) => {
+            if (!option.label) {
+              return null;
+            }
+            return /*#__PURE__*/ _react.default.createElement(
+              'option',
+              (0, _extends2.default)(
+                {
+                  key: index,
+                  value: option.value,
+                },
+                isSelected && {
+                  'data-tmp': '{'.concat(item.name, ':selected#').concat(option.value, '}'),
+                }
+              ),
+              option.label
+            );
+          })
+        ),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
         })
       )
   );
diff --git a/lib/components/html/TextInput.js b/lib/components/html/TextInput.js
index bdf654f..cfecd8b 100644
--- a/lib/components/html/TextInput.js
+++ b/lib/components/html/TextInput.js
@@ -47,17 +47,17 @@ function TextInput(props) {
               : {}
           )
         ),
-        /*#__PURE__*/ _react.default.createElement('input', {
-          type: 'hidden',
-          name: 'field[]',
-          defaultValue: item.name,
-        }),
         /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
           item: item,
         }),
         /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
           name: item.name,
           noSearch: item.noSearch,
+        }),
+        /*#__PURE__*/ _react.default.createElement('input', {
+          type: 'hidden',
+          name: 'field[]',
+          defaultValue: item.name,
         })
       ),
     mode === 'fieldgroup' &&
@@ -112,6 +112,13 @@ function TextInput(props) {
               : {}
           )
         ),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
+        }),
         /*#__PURE__*/ _react.default.createElement('input', {
           type: 'hidden',
           name: 'unit{id}[]',
@@ -120,26 +127,33 @@ function TextInput(props) {
       ),
     mode === 'unitgroup' &&
       /*#__PURE__*/ _react.default.createElement(
-        'input',
-        (0, _extends2.default)(
-          {
-            type: item.type,
-            name: ''.concat(item.name, '{id}[]'),
-          },
-          isValue && {
-            value: '{'.concat(item.name, '}'),
-          },
-          {
-            className: (0, _classnames.default)({
-              'acms-admin-form-width-full': acmscss,
-            }),
-          },
-          item.placeholder
-            ? {
-                placeholder: item.placeholder,
-              }
-            : {}
-        )
+        _react.default.Fragment,
+        null,
+        /*#__PURE__*/ _react.default.createElement(
+          'input',
+          (0, _extends2.default)(
+            {
+              type: item.type,
+              name: ''.concat(item.name, '{id}[]'),
+            },
+            isValue && {
+              value: '{'.concat(item.name, '}'),
+            },
+            {
+              className: (0, _classnames.default)({
+                'acms-admin-form-width-full': acmscss,
+              }),
+            },
+            item.placeholder
+              ? {
+                  placeholder: item.placeholder,
+                }
+              : {}
+          )
+        ),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
+        })
       )
   );
 }
diff --git a/lib/components/html/Textarea.js b/lib/components/html/Textarea.js
index d51177c..dcc0264 100644
--- a/lib/components/html/Textarea.js
+++ b/lib/components/html/Textarea.js
@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require('react'));
 var _classnames = _interopRequireDefault(require('classnames'));
 var _MakerContext = require('../../store/MakerContext');
 var _OptionValidator = require('./OptionValidator');
+var _OptionNoSearch = require('./OptionNoSearch');
 function Textarea(props) {
   const { item, id = '', isValue = true } = props;
   const {
@@ -47,13 +48,17 @@ function Textarea(props) {
           ),
           isValue ? '{'.concat(item.name, '}') : ''
         ),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
+        }),
         /*#__PURE__*/ _react.default.createElement('input', {
           type: 'hidden',
           name: 'field[]',
           defaultValue: item.name,
-        }),
-        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
-          item: item,
         })
       ),
     mode === 'fieldgroup' &&
@@ -100,13 +105,17 @@ function Textarea(props) {
           ),
           isValue ? '{'.concat(item.name, '}') : ''
         ),
+        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
+          item: item,
+        }),
+        /*#__PURE__*/ _react.default.createElement(_OptionNoSearch.OptionNoSearch, {
+          name: item.name,
+          noSearch: item.noSearch,
+        }),
         /*#__PURE__*/ _react.default.createElement('input', {
           type: 'hidden',
           name: 'unit{id}[]',
           value: ''.concat(item.name, '{id}'),
-        }),
-        /*#__PURE__*/ _react.default.createElement(_OptionValidator.OptionValidator, {
-          item: item,
         })
       ),
     mode === 'unitgroup' &&
diff --git a/lib/components/layouts/GroupSection.js b/lib/components/layouts/GroupSection.js
index 7923589..ab36fa1 100644
--- a/lib/components/layouts/GroupSection.js
+++ b/lib/components/layouts/GroupSection.js
@@ -93,7 +93,11 @@ function GroupSection() {
             },
             (() => {
               switch (item.type) {
-                case 'text': {
+                case 'text':
+                case 'tel':
+                case 'number':
+                case 'email':
+                case 'password': {
                   return /*#__PURE__*/ _react.default.createElement(
                     _react.default.Fragment,
                     null,
@@ -124,7 +128,8 @@ function GroupSection() {
                     )
                   );
                 }
-                case 'textarea': {
+                case 'textarea':
+                case 'liteEditor': {
                   return /*#__PURE__*/ _react.default.createElement(
                     _react.default.Fragment,
                     null,
@@ -518,7 +523,11 @@ function GroupSection() {
                             },
                             (() => {
                               switch (item.type) {
-                                case 'text': {
+                                case 'text':
+                                case 'tel':
+                                case 'number':
+                                case 'email':
+                                case 'password': {
                                   return /*#__PURE__*/ _react.default.createElement(
                                     _react.default.Fragment,
                                     null,
@@ -548,7 +557,8 @@ function GroupSection() {
                                     )
                                   );
                                 }
-                                case 'textarea': {
+                                case 'textarea':
+                                case 'liteEditor': {
                                   return /*#__PURE__*/ _react.default.createElement(
                                     _react.default.Fragment,
                                     null,
diff --git a/lib/components/layouts/GroupTableLayout.js b/lib/components/layouts/GroupTableLayout.js
index 6bf63ff..c011463 100644
--- a/lib/components/layouts/GroupTableLayout.js
+++ b/lib/components/layouts/GroupTableLayout.js
@@ -160,7 +160,11 @@ function GroupTableLayout() {
                         null,
                         fieldgroup.items.map((item, index) => {
                           switch (item.type) {
-                            case 'text': {
+                            case 'text':
+                            case 'tel':
+                            case 'number':
+                            case 'email':
+                            case 'password': {
                               return /*#__PURE__*/ _react.default.createElement(
                                 _WrapTable.WrapTable,
                                 {
@@ -176,7 +180,8 @@ function GroupTableLayout() {
                                 )
                               );
                             }
-                            case 'textarea': {
+                            case 'textarea':
+                            case 'liteEditor': {
                               return /*#__PURE__*/ _react.default.createElement(
                                 _WrapTable.WrapTable,
                                 {
@@ -384,7 +389,11 @@ function GroupTableLayout() {
                               null,
                               fieldgroup.items.map((item, index) => {
                                 switch (item.type) {
-                                  case 'text': {
+                                  case 'text':
+                                  case 'tel':
+                                  case 'number':
+                                  case 'email':
+                                  case 'password': {
                                     return /*#__PURE__*/ _react.default.createElement(
                                       _WrapTable.WrapTable,
                                       {
@@ -401,7 +410,8 @@ function GroupTableLayout() {
                                       )
                                     );
                                   }
-                                  case 'textarea': {
+                                  case 'textarea':
+                                  case 'liteEditor': {
                                     return /*#__PURE__*/ _react.default.createElement(
                                       _WrapTable.WrapTable,
                                       {
diff --git a/lib/components/layouts/TableLayout.js b/lib/components/layouts/TableLayout.js
index baafe89..73f3e05 100644
--- a/lib/components/layouts/TableLayout.js
+++ b/lib/components/layouts/TableLayout.js
@@ -38,7 +38,11 @@ function TableLayout() {
       customfield.length > 0 &&
         customfield.map((item, index) => {
           switch (item.type) {
-            case 'text': {
+            case 'text':
+            case 'tel':
+            case 'number':
+            case 'email':
+            case 'password': {
               return /*#__PURE__*/ _react.default.createElement(
                 'tr',
                 {
@@ -61,7 +65,8 @@ function TableLayout() {
                 )
               );
             }
-            case 'textarea': {
+            case 'textarea':
+            case 'liteEditor': {
               return /*#__PURE__*/ _react.default.createElement(
                 'tr',
                 {
diff --git a/lib/components/layouts/UnitGroupSection.js b/lib/components/layouts/UnitGroupSection.js
index 949c5af..ebf09f3 100644
--- a/lib/components/layouts/UnitGroupSection.js
+++ b/lib/components/layouts/UnitGroupSection.js
@@ -72,7 +72,11 @@ function UnitGroupSection() {
             },
             (() => {
               switch (item.type) {
-                case 'text': {
+                case 'text':
+                case 'tel':
+                case 'number':
+                case 'email':
+                case 'password': {
                   return /*#__PURE__*/ _react.default.createElement(
                     _react.default.Fragment,
                     null,
@@ -103,7 +107,8 @@ function UnitGroupSection() {
                     )
                   );
                 }
-                case 'textarea': {
+                case 'textarea':
+                case 'liteEditor': {
                   return /*#__PURE__*/ _react.default.createElement(
                     _react.default.Fragment,
                     null,
@@ -496,7 +501,11 @@ function UnitGroupSection() {
                             },
                             (() => {
                               switch (item.type) {
-                                case 'text': {
+                                case 'text':
+                                case 'tel':
+                                case 'number':
+                                case 'email':
+                                case 'password': {
                                   return /*#__PURE__*/ _react.default.createElement(
                                     _react.default.Fragment,
                                     null,
@@ -526,7 +535,8 @@ function UnitGroupSection() {
                                     )
                                   );
                                 }
-                                case 'textarea': {
+                                case 'textarea':
+                                case 'liteEditor': {
                                   return /*#__PURE__*/ _react.default.createElement(
                                     _react.default.Fragment,
                                     null,
diff --git a/lib/components/layouts/UnitGroupTableLayout.js b/lib/components/layouts/UnitGroupTableLayout.js
index 28375c1..280cea6 100644
--- a/lib/components/layouts/UnitGroupTableLayout.js
+++ b/lib/components/layouts/UnitGroupTableLayout.js
@@ -163,7 +163,11 @@ function UnitGroupTableLayout() {
                 },
                 unitgroup.items.map((item, index) => {
                   switch (item.type) {
-                    case 'text': {
+                    case 'text':
+                    case 'tel':
+                    case 'number':
+                    case 'email':
+                    case 'password': {
                       return /*#__PURE__*/ _react.default.createElement(
                         _WrapTable.WrapTable,
                         {
@@ -179,7 +183,8 @@ function UnitGroupTableLayout() {
                         )
                       );
                     }
-                    case 'textarea': {
+                    case 'textarea':
+                    case 'liteEditor': {
                       return /*#__PURE__*/ _react.default.createElement(
                         _WrapTable.WrapTable,
                         {
@@ -394,7 +399,11 @@ function UnitGroupTableLayout() {
                       },
                       unitgroup.items.map((item, index) => {
                         switch (item.type) {
-                          case 'text': {
+                          case 'text':
+                          case 'tel':
+                          case 'number':
+                          case 'email':
+                          case 'password': {
                             return /*#__PURE__*/ _react.default.createElement(
                               _WrapTable.WrapTable,
                               {
@@ -411,7 +420,8 @@ function UnitGroupTableLayout() {
                               )
                             );
                           }
-                          case 'textarea': {
+                          case 'textarea':
+                          case 'liteEditor': {
                             return /*#__PURE__*/ _react.default.createElement(
                               _WrapTable.WrapTable,
                               {
diff --git a/lib/components/layouts/UnitSection.js b/lib/components/layouts/UnitSection.js
index cafe11a..b3f2bca 100644
--- a/lib/components/layouts/UnitSection.js
+++ b/lib/components/layouts/UnitSection.js
@@ -38,7 +38,11 @@ function UnitSection() {
       customunit.length > 0 &&
         customunit.map((item, index) => {
           switch (item.type) {
-            case 'text': {
+            case 'text':
+            case 'tel':
+            case 'number':
+            case 'email':
+            case 'password': {
               return /*#__PURE__*/ _react.default.createElement(
                 'div',
                 {
@@ -75,7 +79,8 @@ function UnitSection() {
                 )
               );
             }
-            case 'textarea': {
+            case 'textarea':
+            case 'liteEditor': {
               return /*#__PURE__*/ _react.default.createElement(
                 'div',
                 {
diff --git a/lib/components/layouts/UnitTableLayout.js b/lib/components/layouts/UnitTableLayout.js
index 7135564..1f0caa0 100644
--- a/lib/components/layouts/UnitTableLayout.js
+++ b/lib/components/layouts/UnitTableLayout.js
@@ -38,7 +38,11 @@ function UnitTableLayout() {
       customunit.length > 0 &&
         customunit.map((item, index) => {
           switch (item.type) {
-            case 'text': {
+            case 'text':
+            case 'tel':
+            case 'number':
+            case 'email':
+            case 'password': {
               return /*#__PURE__*/ _react.default.createElement(
                 'tr',
                 {
@@ -61,7 +65,8 @@ function UnitTableLayout() {
                 )
               );
             }
-            case 'textarea': {
+            case 'textarea':
+            case 'liteEditor': {
               return /*#__PURE__*/ _react.default.createElement(
                 'tr',
                 {
diff --git a/src/components/genelator/Field.jsx b/src/components/genelator/Field.jsx
index 0f8390b..8215a55 100644
--- a/src/components/genelator/Field.jsx
+++ b/src/components/genelator/Field.jsx
@@ -140,9 +140,7 @@ export function Field() {
 
         {field.type === 'richEditor' && <div>{<RichEditorOption field={field} setField={setField} />}</div>}
 
-        {field.type !== 'media' && field.type !== 'richEditor' && field.type !== 'table' && (
-          <Validator field={field} setField={setField} />
-        )}
+        <Validator field={field} setField={setField} />
         <Operator setField={setField} onSubmit={onSubmit} />
       </div>
     </div>
diff --git a/src/components/genelator/base/Validator.jsx b/src/components/genelator/base/Validator.jsx
index 905bc7e..f97ebec 100644
--- a/src/components/genelator/base/Validator.jsx
+++ b/src/components/genelator/base/Validator.jsx
@@ -1,12 +1,16 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import ReactTooltip from 'react-tooltip';
 import { NoSearchBox } from './NoSearchBox';
+import { useMakerContext } from '../../../store/MakerContext';
 
 export function Validator(props) {
   const {
     field: { type, validator, openValidator, converter, noSearch },
     setField,
   } = props;
+  const {
+    preview: { mode },
+  } = useMakerContext();
 
   const [height, setHeight] = useState(0);
   const contentRef = useRef(null);
@@ -46,7 +50,18 @@ export function Validator(props) {
   }, [updateHeight]);
 
   const isConverter = useMemo(() => {
-    const possibleConverter = ['text', 'textarea', 'checkbox', 'selectbox', 'radioButton'];
+    const possibleConverter = [
+      'text',
+      'tel',
+      'number',
+      'email',
+      'password',
+      'textarea',
+      'liteEditor',
+      'checkbox',
+      'selectbox',
+      'radioButton',
+    ];
     return possibleConverter.includes(type);
   }, [type]);
 
@@ -276,8 +291,11 @@ export function Validator(props) {
             </button>
           </div>
 
-          {/text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type) && (
+          {(mode === 'customfield') | (mode === 'customunit') &&
+          /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type) ? (
             <NoSearchBox noSearch={noSearch} setField={setField} />
+          ) : (
+            <></>
           )}
         </div>
       </div>
diff --git a/src/components/html/Checkbox.jsx b/src/components/html/Checkbox.jsx
index 3630a7e..71c0f35 100644
--- a/src/components/html/Checkbox.jsx
+++ b/src/components/html/Checkbox.jsx
@@ -92,6 +92,7 @@ export function Checkbox(props) {
           })}
           <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
           <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
         </>
       )}
 
diff --git a/src/components/html/FileInput.jsx b/src/components/html/FileInput.jsx
index 5923637..f84536c 100644
--- a/src/components/html/FileInput.jsx
+++ b/src/components/html/FileInput.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../store/MakerContext';
 import { OptionValidator } from './OptionValidator';
-import { OptionNoSearch } from './OptionNoSearch';
 
 export function FileInput(props) {
   const { item, id, isValue = true } = props;
@@ -53,8 +52,7 @@ export function FileInput(props) {
           {item.fileNameMethod === 'asis' && (
             <input type="hidden" name={`${item.name}@filename`} value="@rawfilename" />
           )}
-
-          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
+          <OptionValidator item={item} />
         </>
       )}
 
diff --git a/src/components/html/ImageInput.jsx b/src/components/html/ImageInput.jsx
index 009ec3a..cc21861 100644
--- a/src/components/html/ImageInput.jsx
+++ b/src/components/html/ImageInput.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../store/MakerContext';
 import { OptionValidator } from './OptionValidator';
-import { OptionNoSearch } from './OptionNoSearch';
 
 export function ImageInput(props) {
   const { item, id, isAttribute = true } = props;
@@ -74,7 +73,6 @@ export function ImageInput(props) {
 
           <input type="hidden" name={`${item.name}@filename`} value="" />
           <OptionValidator item={item} />
-          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
         </div>
       )}
 
@@ -252,7 +250,7 @@ export function ImageInput(props) {
             {item.square && item.squareSize && (
               <input type="hidden" name={`${item.name}{id}@${item.square}[]`} value={item.squareSize} />
             )}
-            {isAttribute && <OptionValidator item={item} />}
+            <OptionValidator item={item} />
           </div>
         </>
       )}
diff --git a/src/components/html/Media.jsx b/src/components/html/Media.jsx
index 88a64d2..96570b9 100644
--- a/src/components/html/Media.jsx
+++ b/src/components/html/Media.jsx
@@ -118,6 +118,7 @@ export function Media(props) {
           />
           <input type="hidden" name="field[]" value={item.name} />
           <input type="hidden" name={`${item.name}:extension`} value="media" />
+          <OptionValidator item={item} />
         </div>
       )}
 
diff --git a/src/components/html/RadioButton.jsx b/src/components/html/RadioButton.jsx
index 19daae1..693ebe8 100644
--- a/src/components/html/RadioButton.jsx
+++ b/src/components/html/RadioButton.jsx
@@ -92,6 +92,7 @@ export function RadioButton(props) {
           })}
           <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
           <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
         </>
       )}
 
diff --git a/src/components/html/Selectbox.jsx b/src/components/html/Selectbox.jsx
index ff72172..19c00f3 100644
--- a/src/components/html/Selectbox.jsx
+++ b/src/components/html/Selectbox.jsx
@@ -74,29 +74,33 @@ export function Selectbox(props) {
           </select>
           <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
           <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
         </>
       )}
 
       {mode === 'unitgroup' && (
-        <select name={`${item.name}{id}[]`} className={classnames({ 'acms-admin-form-width-full': acmscss })}>
-          <option value="" />
-          {item.option.map((option, index) => {
-            if (!option.label) {
-              return null;
-            }
-            return (
-              <option
-                key={index}
-                value={option.value}
-                {...(isSelected && {
-                  'data-tmp': `{${item.name}:selected#${option.value}}`,
-                })}
-              >
-                {option.label}
-              </option>
-            );
-          })}
-        </select>
+        <>
+          <select name={`${item.name}{id}[]`} className={classnames({ 'acms-admin-form-width-full': acmscss })}>
+            <option value="" />
+            {item.option.map((option, index) => {
+              if (!option.label) {
+                return null;
+              }
+              return (
+                <option
+                  key={index}
+                  value={option.value}
+                  {...(isSelected && {
+                    'data-tmp': `{${item.name}:selected#${option.value}}`,
+                  })}
+                >
+                  {option.label}
+                </option>
+              );
+            })}
+          </select>
+          <OptionValidator item={item} />
+        </>
       )}
     </>
   );
diff --git a/src/components/html/TextInput.jsx b/src/components/html/TextInput.jsx
index 9a77b0c..ad62865 100644
--- a/src/components/html/TextInput.jsx
+++ b/src/components/html/TextInput.jsx
@@ -23,9 +23,9 @@ export function TextInput(props) {
             {...(item.placeholder ? { placeholder: item.placeholder } : {})}
             {...(jsValidator ? { 'data-validator': item.name } : {})}
           />
-          <input type="hidden" name="field[]" defaultValue={item.name} />
           <OptionValidator item={item} />
           <OptionNoSearch name={item.name} noSearch={item.noSearch} />
+          <input type="hidden" name="field[]" defaultValue={item.name} />
         </>
       )}
 
@@ -53,20 +53,25 @@ export function TextInput(props) {
             className={classnames({ 'acms-admin-form-width-full': acmscss })}
             {...(item.placeholder ? { placeholder: item.placeholder } : {})}
           />
+          <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
           <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
         </>
       )}
 
       {mode === 'unitgroup' && (
-        <input
-          type={item.type}
-          name={`${item.name}{id}[]`}
-          {...(isValue && {
-            value: `{${item.name}}`,
-          })}
-          className={classnames({ 'acms-admin-form-width-full': acmscss })}
-          {...(item.placeholder ? { placeholder: item.placeholder } : {})}
-        />
+        <>
+          <input
+            type={item.type}
+            name={`${item.name}{id}[]`}
+            {...(isValue && {
+              value: `{${item.name}}`,
+            })}
+            className={classnames({ 'acms-admin-form-width-full': acmscss })}
+            {...(item.placeholder ? { placeholder: item.placeholder } : {})}
+          />
+          <OptionValidator item={item} />
+        </>
       )}
     </>
   );
diff --git a/src/components/html/Textarea.jsx b/src/components/html/Textarea.jsx
index bc221b7..e3b8dcd 100644
--- a/src/components/html/Textarea.jsx
+++ b/src/components/html/Textarea.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { useMakerContext } from '../../store/MakerContext';
 import { OptionValidator } from './OptionValidator';
+import { OptionNoSearch } from './OptionNoSearch';
 
 export function Textarea(props) {
   const { item, id = '', isValue = true } = props;
@@ -27,8 +28,9 @@ export function Textarea(props) {
           >
             {isValue ? `{${item.name}}` : ''}
           </textarea>
-          <input type="hidden" name="field[]" defaultValue={item.name} />
           <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
+          <input type="hidden" name="field[]" defaultValue={item.name} />
         </>
       )}
 
@@ -56,8 +58,9 @@ export function Textarea(props) {
           >
             {isValue ? `{${item.name}}` : ''}
           </textarea>
-          <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
           <OptionValidator item={item} />
+          <OptionNoSearch name={item.name} noSearch={item.noSearch} />
+          <input type="hidden" name="unit{id}[]" value={`${item.name}{id}`} />
         </>
       )}
 
diff --git a/src/components/layouts/GroupSection.jsx b/src/components/layouts/GroupSection.jsx
index e3051ae..07c128a 100644
--- a/src/components/layouts/GroupSection.jsx
+++ b/src/components/layouts/GroupSection.jsx
@@ -56,7 +56,11 @@ export function GroupSection() {
           >
             {(() => {
               switch (item.type) {
-                case 'text': {
+                case 'text':
+                case 'tel':
+                case 'number':
+                case 'email':
+                case 'password': {
                   return (
                     <>
                       <label
@@ -71,7 +75,8 @@ export function GroupSection() {
                     </>
                   );
                 }
-                case 'textarea': {
+                case 'textarea':
+                case 'liteEditor': {
                   return (
                     <>
                       <label
@@ -278,7 +283,11 @@ export function GroupSection() {
                             >
                               {(() => {
                                 switch (item.type) {
-                                  case 'text': {
+                                  case 'text':
+                                  case 'tel':
+                                  case 'number':
+                                  case 'email':
+                                  case 'password': {
                                     return (
                                       <>
                                         <label
@@ -293,7 +302,8 @@ export function GroupSection() {
                                       </>
                                     );
                                   }
-                                  case 'textarea': {
+                                  case 'textarea':
+                                  case 'liteEditor': {
                                     return (
                                       <>
                                         <label
diff --git a/src/components/layouts/GroupTable.jsx b/src/components/layouts/GroupTable.jsx
deleted file mode 100644
index 408e8f0..0000000
--- a/src/components/layouts/GroupTable.jsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import React, { useRef } from 'react';
-import classnames from 'classnames';
-import { TextInput } from '../html/TextInput';
-import { TextareaInput } from '../html/TextareaInput';
-import { useMakerContext } from '../../store/MakerContext';
-import { useEditorContext } from '../../store/EditorContext';
-
-export function GroupTable(props) {
-  const { fieldgroup } = props;
-  const { preview } = useMakerContext();
-  const { editor } = useEditorContext();
-  const tableRef = useRef();
-
-  const ConditionalWrap = ({ condition, wrap, children }) => (condition ? wrap(children) : children);
-  const groupLength = fieldgroup.items.length;
-
-  return (
-    <section>
-      {fieldgroup.title && (
-        <h2 className={classnames({ 'acms-admin-admin-title2': preview.acmscss })}>{fieldgroup.title}</h2>
-      )}
-      {fieldgroup.name && (
-        <table
-          className={classnames('js-fieldgroup-sortable', {
-            'adminTable acms-admin-table-admin-edit': preview.acmscss,
-          })}
-          ref={tableRef}
-        >
-          <thead className={classnames({ 'acms-admin-hide-sp': preview.acmscss })}>
-            <tr>
-              <th
-                className={classnames({
-                  'acms-admin-table-left acms-admin-admin-config-table-item-handle': preview.acmscss,
-                })}
-              >
-                &nbsp;
-              </th>
-              {preview.direction === 'horizontal' && (
-                <>
-                  {fieldgroup &&
-                    fieldgroup.items.map((item) => (
-                      <th className={classnames({ 'acms-admin-table-left': preview.acmscss })}>
-                        {item.title}
-                        {item.tooltip && (
-                          <i className="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip={item.tooltip} />
-                        )}
-                      </th>
-                    ))}
-                </>
-              )}
-              {preview.direction === 'vertical' && <th />}
-              <th
-                className={classnames({
-                  'acms-admin-table-left acms-admin-admin-config-table-action': preview.acmscss,
-                })}
-              >
-                削除
-              </th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {preview.editMode === 'preview' ? null : `<!-- BEGIN ${fieldgroup.name}:loop -->`}
-            <tr className="sortable-item">
-              <td className="item-handle acms-admin-table-nowrap">
-                {preview.acmscss && <i className="acms-admin-icon-sort" />}
-              </td>
-
-              <ConditionalWrap
-                condition={preview.direction === 'vertical'}
-                wrap={(children) => (
-                  <td>
-                    <table>{children}</table>
-                  </td>
-                )}
-              >
-                {/* input loop */}
-                {groupitems.map((item, index) => {
-                  switch (item.type) {
-                    case 'text': {
-                      return (
-                        <tr key={index} className="acms-admin-form-item">
-                          <th className="acms-admin-form-item-heading">
-                            <Label item={item} />
-                          </th>
-                          <td className="acms-admin-form-item-input">
-                            <TextInput item={item} preview={preview} />
-                          </td>
-                        </tr>
-                      );
-                    }
-                    case 'textarea': {
-                      return (
-                        <tr key={index} className="acms-admin-form-item">
-                          <th className="acms-admin-form-item-heading">{Label(item)}</th>
-                          <td className="acms-admin-form-item-input">
-                            <TextareaInput item={item} />
-                          </td>
-                        </tr>
-                      );
-                    }
-                    default: {
-                      return null;
-                    }
-                  }
-                })}
-                {editor.editMode === 'preview' ? null : `<!-- END ${groupName}:loop -->`}
-
-                {/* input template */}
-                {editor.editMode === 'preview' ? null : (
-                  <tr className="sortable-item item-template">
-                    {groupitems &&
-                      groupitems.map((item, index) => {
-                        switch (item.type) {
-                          case 'text': {
-                            return (
-                              <tr key={index} className="acms-admin-form-item">
-                                <td className="acms-admin-form-item-input">{TextInput(item)}</td>
-                              </tr>
-                            );
-                          }
-                          case 'textarea': {
-                            return (
-                              <tr key={index} className="acms-admin-form-item">
-                                <td className="acms-admin-form-item-input">{TextareaInput(item)}</td>
-                              </tr>
-                            );
-                          }
-                          default: {
-                            return null;
-                          }
-                        }
-                      })}
-                  </tr>
-                )}
-              </ConditionalWrap>
-
-              <td className="acms-admin-table-nowrap">
-                <input
-                  type="button"
-                  className={classnames('item-delete', {
-                    'acms-admin-btn-admin acms-admin-btn-admin-danger': preview.acmscss,
-                  })}
-                  value="削除"
-                />
-              </td>
-            </tr>
-          </tbody>
-
-          <tfoot>
-            <tr>
-              <td colSpan={preview.direction === 'horizontal' ? groupLength + 2 : 3}>
-                <input
-                  type="button"
-                  className={classnames('item-insert', { 'acms-admin-btn-admin': preview.acmscss })}
-                  value="追加"
-                />
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      )}
-
-      {/* input hidden */}
-      {groupName && (
-        <>
-          {groupitems.map((item) => (
-            <>
-              {item.type === 'image' && (
-                <>
-                  {item.square && (
-                    <>
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@squarePath`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@squareAlt`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@squareX`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@squareY`} />
-                    </>
-                  )}
-                  {item.large && (
-                    <>
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@largePath`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@largeAlt`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@largeX`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@largeY`} />
-                    </>
-                  )}
-                  {item.tiny && (
-                    <>
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@tinyPath`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@tinyAlt`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@tinyX`} />
-                      <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@tinyY`} />
-                    </>
-                  )}
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@path`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@alt`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@x`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@y`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@edit`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@old`} />
-                  <input type="hidden" name={`${item.name}:extension`} value="image" />
-                </>
-              )}
-              {item.type === 'file' && (
-                <>
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@path`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@alt`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@edit`} />
-                  <input type="hidden" name={`@${groupName}[]`} value={`${item.name}@old`} />
-                  <input type="hidden" name={`${item.name}:extension`} value="file" />
-                </>
-              )}
-              {item.type === 'media' && <input type="hidden" name={`${item.name}:extension`} value="media" />}
-              {item.type === 'rich-editor' && (
-                <input type="hidden" name={`${item.name}:extension`} value="rich-editor" />
-              )}
-              <input type="hidden" name={`@${groupName}[]`} value={item.name} />
-              <input type="hidden" name="field[]" value={item.name} />
-              {item.noSearch && <input type="hidden" name={`${item.name}:search`} value="0" />}
-              {item.validator.map((validator) => {
-                if (!validator.option) {
-                  return null;
-                }
-                const name = item.type === 'file' || item.type === 'image' ? `${item.name}@path` : item.name;
-                return (
-                  <input
-                    type="hidden"
-                    name={`${name}:v#${validator.option}`}
-                    value={validator.value}
-                    id={`${name}-v-${validator.option}`}
-                  />
-                );
-              })}
-              {(() => {
-                const name = item.type === 'file' || item.type === 'image' ? `${item.name}@path` : item.name;
-                return item.converter && <input type="hidden" name={`${name}:c`} value={item.converter} />;
-              })()}
-            </>
-          ))}
-          <input type="hidden" name="field[]" value={`@${groupName}`} />
-        </>
-      )}
-    </section>
-  );
-}
diff --git a/src/components/layouts/GroupTableLayout.jsx b/src/components/layouts/GroupTableLayout.jsx
index 4d4b015..c32ef8f 100644
--- a/src/components/layouts/GroupTableLayout.jsx
+++ b/src/components/layouts/GroupTableLayout.jsx
@@ -81,7 +81,11 @@ export function GroupTableLayout() {
                         <>
                           {fieldgroup.items.map((item, index) => {
                             switch (item.type) {
-                              case 'text': {
+                              case 'text':
+                              case 'tel':
+                              case 'number':
+                              case 'email':
+                              case 'password': {
                                 return (
                                   <WrapTable title={item.title}>
                                     <td>
@@ -90,7 +94,8 @@ export function GroupTableLayout() {
                                   </WrapTable>
                                 );
                               }
-                              case 'textarea': {
+                              case 'textarea':
+                              case 'liteEditor': {
                                 return (
                                   <WrapTable title={item.title}>
                                     <td>
@@ -206,7 +211,11 @@ export function GroupTableLayout() {
                             <>
                               {fieldgroup.items.map((item, index) => {
                                 switch (item.type) {
-                                  case 'text': {
+                                  case 'text':
+                                  case 'tel':
+                                  case 'number':
+                                  case 'email':
+                                  case 'password': {
                                     return (
                                       <WrapTable title={item.title}>
                                         <td>
@@ -215,7 +224,8 @@ export function GroupTableLayout() {
                                       </WrapTable>
                                     );
                                   }
-                                  case 'textarea': {
+                                  case 'textarea':
+                                  case 'liteEditor': {
                                     return (
                                       <WrapTable title={item.title}>
                                         <td>
diff --git a/src/components/layouts/TableLayout.jsx b/src/components/layouts/TableLayout.jsx
index 5c6b669..f4c8642 100644
--- a/src/components/layouts/TableLayout.jsx
+++ b/src/components/layouts/TableLayout.jsx
@@ -26,7 +26,11 @@ export function TableLayout() {
         {customfield.length > 0 &&
           customfield.map((item, index) => {
             switch (item.type) {
-              case 'text': {
+              case 'text':
+              case 'tel':
+              case 'number':
+              case 'email':
+              case 'password': {
                 return (
                   <tr key={index}>
                     <th>
@@ -38,7 +42,8 @@ export function TableLayout() {
                   </tr>
                 );
               }
-              case 'textarea': {
+              case 'textarea':
+              case 'liteEditor': {
                 return (
                   <tr key={index}>
                     <th>
diff --git a/src/components/layouts/UnitGroupSection.jsx b/src/components/layouts/UnitGroupSection.jsx
index 1bc28f9..dd1e9e8 100644
--- a/src/components/layouts/UnitGroupSection.jsx
+++ b/src/components/layouts/UnitGroupSection.jsx
@@ -58,7 +58,11 @@ export function UnitGroupSection() {
           >
             {(() => {
               switch (item.type) {
-                case 'text': {
+                case 'text':
+                case 'tel':
+                case 'number':
+                case 'email':
+                case 'password': {
                   return (
                     <>
                       <label
@@ -73,7 +77,8 @@ export function UnitGroupSection() {
                     </>
                   );
                 }
-                case 'textarea': {
+                case 'textarea':
+                case 'liteEditor': {
                   return (
                     <>
                       <label
@@ -285,7 +290,11 @@ export function UnitGroupSection() {
                             >
                               {(() => {
                                 switch (item.type) {
-                                  case 'text': {
+                                  case 'text':
+                                  case 'tel':
+                                  case 'number':
+                                  case 'email':
+                                  case 'password': {
                                     return (
                                       <>
                                         <label
@@ -300,7 +309,8 @@ export function UnitGroupSection() {
                                       </>
                                     );
                                   }
-                                  case 'textarea': {
+                                  case 'textarea':
+                                  case 'liteEditor': {
                                     return (
                                       <>
                                         <label
diff --git a/src/components/layouts/UnitGroupTableLayout.jsx b/src/components/layouts/UnitGroupTableLayout.jsx
index 6df308d..99c978c 100644
--- a/src/components/layouts/UnitGroupTableLayout.jsx
+++ b/src/components/layouts/UnitGroupTableLayout.jsx
@@ -77,7 +77,11 @@ export function UnitGroupTableLayout() {
                 >
                   {unitgroup.items.map((item, index) => {
                     switch (item.type) {
-                      case 'text': {
+                      case 'text':
+                      case 'tel':
+                      case 'number':
+                      case 'email':
+                      case 'password': {
                         return (
                           <WrapTable title={item.title}>
                             <td>
@@ -86,7 +90,8 @@ export function UnitGroupTableLayout() {
                           </WrapTable>
                         );
                       }
-                      case 'textarea': {
+                      case 'textarea':
+                      case 'liteEditor': {
                         return (
                           <WrapTable title={item.title}>
                             <td>
@@ -210,7 +215,11 @@ export function UnitGroupTableLayout() {
                     >
                       {unitgroup.items.map((item, index) => {
                         switch (item.type) {
-                          case 'text': {
+                          case 'text':
+                          case 'tel':
+                          case 'number':
+                          case 'email':
+                          case 'password': {
                             return (
                               <WrapTable title={item.title}>
                                 <td>
@@ -219,7 +228,8 @@ export function UnitGroupTableLayout() {
                               </WrapTable>
                             );
                           }
-                          case 'textarea': {
+                          case 'textarea':
+                          case 'liteEditor': {
                             return (
                               <WrapTable title={item.title}>
                                 <td>
diff --git a/src/components/layouts/UnitSection.jsx b/src/components/layouts/UnitSection.jsx
index c0bbbb7..3630d31 100644
--- a/src/components/layouts/UnitSection.jsx
+++ b/src/components/layouts/UnitSection.jsx
@@ -26,7 +26,11 @@ export function UnitSection() {
         {customunit.length > 0 &&
           customunit.map((item, index) => {
             switch (item.type) {
-              case 'text': {
+              case 'text':
+              case 'tel':
+              case 'number':
+              case 'email':
+              case 'password': {
                 return (
                   <div
                     key={index}
@@ -48,7 +52,8 @@ export function UnitSection() {
                   </div>
                 );
               }
-              case 'textarea': {
+              case 'textarea':
+              case 'liteEditor': {
                 return (
                   <div
                     key={index}
diff --git a/src/components/layouts/UnitTableLayout.jsx b/src/components/layouts/UnitTableLayout.jsx
index f80629c..2fce636 100644
--- a/src/components/layouts/UnitTableLayout.jsx
+++ b/src/components/layouts/UnitTableLayout.jsx
@@ -26,7 +26,11 @@ export function UnitTableLayout() {
         {customunit.length > 0 &&
           customunit.map((item, index) => {
             switch (item.type) {
-              case 'text': {
+              case 'text':
+              case 'tel':
+              case 'number':
+              case 'email':
+              case 'password': {
                 return (
                   <tr key={index}>
                     <th>
@@ -38,7 +42,8 @@ export function UnitTableLayout() {
                   </tr>
                 );
               }
-              case 'textarea': {
+              case 'textarea':
+              case 'liteEditor': {
                 return (
                   <tr key={index}>
                     <th>