diff --git a/addons/account/__manifest__.py b/addons/account/__manifest__.py
index c658b456f34..a4b63d865fd 100644
--- a/addons/account/__manifest__.py
+++ b/addons/account/__manifest__.py
@@ -109,6 +109,7 @@ You could use this simplified accounting in case you work with an (external) acc
             'account/static/src/js/bills_upload.js',
             'account/static/src/js/legacy_bills_upload.js',
             'account/static/src/js/account_selection.js',
+            'account/static/src/js/legacy_account_selection.js',
             'account/static/src/js/open_move_widget.js',
             'account/static/src/js/account_move_form.js',
         ],
diff --git a/addons/account/static/src/js/account_selection.js b/addons/account/static/src/js/account_selection.js
index 99cd9b3782b..6e43dff1935 100644
--- a/addons/account/static/src/js/account_selection.js
+++ b/addons/account/static/src/js/account_selection.js
@@ -1,31 +1,23 @@
 /** @odoo-module **/
 
-import { qweb, _t } from 'web.core';
-import fieldRegistry from 'web.field_registry';
-import { FieldSelection } from 'web.relational_fields';
+import { registry } from "@web/core/registry";
+import { SelectionField } from "@web/views/fields/selection/selection_field";
 
-
-export const HierarchySelection = FieldSelection.extend({
-
-    init: function () {
-        this._super.apply(this, arguments);
-        this.hierarchyGroups = [
-            {name: _t('Balance Sheet')},
-            {name: _t('Assets'), children: this.values.filter(x => x[0] && x[0].startsWith('asset'))},
-            {name: _t('Liabilities'), children: this.values.filter(x => x[0] && x[0].startsWith('liability'))},
-            {name: _t('Equity'), children: this.values.filter(x => x[0] && x[0].startsWith('equity'))},
-            {name: _t('Profit & Loss')},
-            {name: _t('Income'), children: this.values.filter(x => x[0] && x[0].startsWith('income'))},
-            {name: _t('Expense'), children: this.values.filter(x => x[0] && x[0].startsWith('expense'))},
-            {name: _t('Other'), children: this.values.filter(x => x[0] && x[0] == 'off_balance')},
+export class AccountTypeSelection extends SelectionField {
+    get hierarchyOptions() {
+        const opts = this.options;
+        return [
+            { name: this.env._t('Balance Sheet') },
+            { name: this.env._t('Assets'), children: opts.filter(x => x[0] && x[0].startsWith('asset')) },
+            { name: this.env._t('Liabilities'), children: opts.filter(x => x[0] && x[0].startsWith('liability')) },
+            { name: this.env._t('Equity'), children: opts.filter(x => x[0] && x[0].startsWith('equity')) },
+            { name: this.env._t('Profit & Loss') },
+            { name: this.env._t('Income'), children: opts.filter(x => x[0] && x[0].startsWith('income')) },
+            { name: this.env._t('Expense'), children: opts.filter(x => x[0] && x[0].startsWith('expense')) },
+            { name: this.env._t('Other'), children: opts.filter(x => x[0] && x[0] === 'off_balance') },
         ];
-    },
-
-    _renderEdit: function () {
-        this.$el.empty();
-        this.$el.append(qweb.render('accountTypeSelection', {widget: this}));
-        this.$el.val(JSON.stringify(this._getRawValue()));
     }
-});
+}
+AccountTypeSelection.template = "account.AccountTypeSelection";
 
-fieldRegistry.add("account_type_selection", HierarchySelection);
+registry.category("fields").add("account_type_selection", AccountTypeSelection);
diff --git a/addons/account/static/src/js/legacy_account_selection.js b/addons/account/static/src/js/legacy_account_selection.js
new file mode 100644
index 00000000000..99cd9b3782b
--- /dev/null
+++ b/addons/account/static/src/js/legacy_account_selection.js
@@ -0,0 +1,31 @@
+/** @odoo-module **/
+
+import { qweb, _t } from 'web.core';
+import fieldRegistry from 'web.field_registry';
+import { FieldSelection } from 'web.relational_fields';
+
+
+export const HierarchySelection = FieldSelection.extend({
+
+    init: function () {
+        this._super.apply(this, arguments);
+        this.hierarchyGroups = [
+            {name: _t('Balance Sheet')},
+            {name: _t('Assets'), children: this.values.filter(x => x[0] && x[0].startsWith('asset'))},
+            {name: _t('Liabilities'), children: this.values.filter(x => x[0] && x[0].startsWith('liability'))},
+            {name: _t('Equity'), children: this.values.filter(x => x[0] && x[0].startsWith('equity'))},
+            {name: _t('Profit & Loss')},
+            {name: _t('Income'), children: this.values.filter(x => x[0] && x[0].startsWith('income'))},
+            {name: _t('Expense'), children: this.values.filter(x => x[0] && x[0].startsWith('expense'))},
+            {name: _t('Other'), children: this.values.filter(x => x[0] && x[0] == 'off_balance')},
+        ];
+    },
+
+    _renderEdit: function () {
+        this.$el.empty();
+        this.$el.append(qweb.render('accountTypeSelection', {widget: this}));
+        this.$el.val(JSON.stringify(this._getRawValue()));
+    }
+});
+
+fieldRegistry.add("account_type_selection", HierarchySelection);
diff --git a/addons/account/static/src/xml/account_type_selection.xml b/addons/account/static/src/xml/account_type_selection.xml
index dbc6904eb9b..d6ce6448dbe 100644
--- a/addons/account/static/src/xml/account_type_selection.xml
+++ b/addons/account/static/src/xml/account_type_selection.xml
@@ -2,16 +2,21 @@
 
 <templates>
 
-    <t t-name="accountTypeSelection">
-        <t t-foreach="widget.hierarchyGroups" t-as="group">
-            <optgroup t-att-label="group.name">
-                <t t-if="group.children">
-                    <t t-foreach="group.children" t-as="child">
-                        <option t-att-value="JSON.stringify(child[0])" t-out="child[1]"/>
+    <t t-name="account.AccountTypeSelection" t-inherit="web.SelectionField" t-inherit-mode="primary" owl="1">
+        <xpath expr="//t[@t-foreach='options']" position="replace">
+            <t t-foreach="hierarchyOptions" t-as="group" t-key="group_index">
+                <optgroup t-att-label="group.name">
+                    <t t-if="!!group.children">
+                        <t t-foreach="group.children" t-as="child" t-key="child[0]">
+                            <option
+                                t-att-selected="child[0] === value"
+                                t-att-value="stringify(child[0])"
+                                t-esc="child[1]"/>
+                        </t>
                     </t>
-                </t>
-            </optgroup>
-        </t>
+                </optgroup>
+            </t>
+        </xpath>
     </t>
 
 </templates>
diff --git a/addons/account/static/src/xml/legacy_account_type_selection.xml b/addons/account/static/src/xml/legacy_account_type_selection.xml
new file mode 100644
index 00000000000..dbc6904eb9b
--- /dev/null
+++ b/addons/account/static/src/xml/legacy_account_type_selection.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates>
+
+    <t t-name="accountTypeSelection">
+        <t t-foreach="widget.hierarchyGroups" t-as="group">
+            <optgroup t-att-label="group.name">
+                <t t-if="group.children">
+                    <t t-foreach="group.children" t-as="child">
+                        <option t-att-value="JSON.stringify(child[0])" t-out="child[1]"/>
+                    </t>
+                </t>
+            </optgroup>
+        </t>
+    </t>
+
+</templates>