diff --git a/front/core/components/account-number/index.html b/front/core/components/account-number/index.html
index 1035dff89b..ff8bd763af 100644
--- a/front/core/components/account-number/index.html
+++ b/front/core/components/account-number/index.html
@@ -1,8 +1,5 @@
 <vn-textfield
-    label="Account"
-    name="account"
-    ng-model="$ctrl.accountNumber"
-    on-change="$ctrl.accountShortToStandard(value)"
+    on-change="$ctrl.accountShortToStandard()"
     insertable="true"
     max-length="10">
 </vn-textfield>
diff --git a/front/core/components/account-number/index.js b/front/core/components/account-number/index.js
index 15f5b0c94b..54380372ca 100644
--- a/front/core/components/account-number/index.js
+++ b/front/core/components/account-number/index.js
@@ -1,15 +1,16 @@
-import Component from '../../lib/component';
+import Textfield from '../textfield/textfield';
+import './style.scss';
 import ngModule from '../../module';
 
-export default class AccountNumber extends Component {
+export default class AccountNumber extends Textfield {
     constructor($element, $) {
         super($element, $);
         this.$ = $;
     }
 
-    accountShortToStandard(value) {
-        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
-        this.$.$emit('accountShortToStandard', this.accountNumber);
+    accountShortToStandard() {
+        this.field = this.field.replace('.', '0'.repeat(11 - this.field.length));
+        this.$.$emit('accountShortToStandard', this.field);
     }
 }
 
@@ -18,7 +19,4 @@ AccountNumber.$inject = ['$element', '$scope'];
 ngModule.vnComponent('vnAccountNumber', {
     template: require('./index.html'),
     controller: AccountNumber,
-    bindings: {
-        accountNumber: '<'
-    }
 });
diff --git a/front/core/components/account-number/style.scss b/front/core/components/account-number/style.scss
new file mode 100644
index 0000000000..d4dcd19ec0
--- /dev/null
+++ b/front/core/components/account-number/style.scss
@@ -0,0 +1,356 @@
+@import "variables";
+
+.vn-field {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+
+    & > .container {
+        display: flex;
+        align-items: stretch;
+        position: relative;
+        outline: none;
+
+        & > .infix {
+            position: relative;
+            display: flex;
+            flex: auto;
+            width: 100%;
+            min-width: 0;
+
+            & > label {
+                position: absolute;
+                left: 0;
+                top: 18px;
+                line-height: 20px;
+                pointer-events: none;
+                color: $color-font-bg-marginal;
+                transition-property: top, color, font-size;
+                transition-duration: 400ms;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+
+                & > .required {
+                    display: none;
+                }
+            }
+            & > .fix {
+                padding-top: 24px;
+                line-height: 24px;
+                font-size: 1rem;
+                opacity: 0;
+                transition: opacity 200ms ease-in-out;
+
+                &.prefix {
+                    padding-right: 5px;
+                }
+                &.suffix {
+                    padding-left: 5px;
+                }
+            }
+            & > .control {
+                height: 100%;
+                flex: auto;
+
+                & > * {
+                    padding-top: 24px;
+                    padding-bottom: 8px;
+                    height: inherit;
+                    outline: none;
+                    border: none;
+                    font-family: Arial, sans-serif;
+                    display: block;
+                    font-size: 1rem;
+                    width: 100%;
+                    background: 0;
+                    color: inherit;
+                    box-sizing: border-box;
+                    min-height: 56px;
+                }
+                & > input {
+                    position: relative;
+                    color: $color-font;
+
+                    &::placeholder {
+                        color: $color-font-bg-marginal;
+                    }
+                    &[type=time],
+                    &[type=date],
+                    &[type=password] {
+                        opacity: 0;
+                        transition: opacity 200ms ease-in-out;
+                        cursor: pointer;
+                    }
+                    &[type=time],
+                    &[type=date] {
+                        &::-webkit-inner-spin-button,
+                        &::-webkit-clear-button {
+                            display: none;
+                            -webkit-appearance: none;
+                        }
+                        &::-webkit-calendar-picker-indicator {
+                            position: absolute;
+                            height: 100%;
+                            width: 100%;
+                            opacity: 0;
+                            cursor: pointer;
+                        }
+                    }
+                    &[type=number] {
+                        -moz-appearance: textfield;
+
+                        &::-webkit-outer-spin-button,
+                        &::-webkit-inner-spin-button {
+                            -webkit-appearance: none;
+                            margin: 0;
+                        }
+                    }
+                    &:invalid {
+                        box-shadow: none;
+                    }
+                    &:-internal-autofill-selected {
+                        &,
+                        &:hover,
+                        &:focus,
+                        &:active,
+                        &:valid {
+                            box-shadow: 0 0 0 40px $color-bg-panel inset;
+                            -webkit-text-fill-color: $color-primary-medium
+                        }
+                    }
+                }
+            }
+        }
+        & > .prepend,
+        & > .append,
+        & > .icons {
+            display: flex;
+            align-items: center;
+            color: $color-font-bg-marginal;
+        }
+        & > .prepend > prepend,
+        & > .append > append,
+        & > .icons {
+            display: flex;
+            align-items: center;
+
+            & > vn-icon {
+                font-size: 1.5rem;
+            }
+        }
+        & > .prepend > prepend {
+            padding-right: 12px;
+        }
+        & > .icons {
+            &.pre {
+                padding-left: 12px;
+            }
+            & > vn-icon {
+                cursor: pointer;
+            }
+            & > vn-icon[icon=clear] {
+                display: none;
+            }
+        }
+        & > .icons.pre.clearable {
+            min-width: 22px
+        }
+        & > .underline {
+            position: absolute;
+            bottom: 0;
+            content: ' ';
+            pointer-events: none;
+            width: 100%;
+
+            &.blur {
+                border-bottom: 1px solid $color-input-underline;
+                transition: border-color 200ms ease-in-out;
+            }
+            &.focus {
+                height: 2px;
+                background-color: $color-primary;
+                left: 50%;
+                width: 0;
+                transition-property: width, left, background-color;
+                transition-duration: 300ms;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+            }
+        }
+    }
+    &.dense {
+        & > .hint {
+            display: none;
+        }
+        & > .container > .infix {
+            & > label {
+                top: 8px;
+            }
+            & > .control > * {
+                padding-top: 8px;
+                min-height: 40px;
+            }
+        }
+        &.not-empty,
+        &.focused,
+        &.invalid {
+            & > .container > .infix > label {
+                top: 0;
+                line-height: 8px;
+            }
+        }
+    }
+    &.standout {
+        border-radius: 1px;
+        background-color: rgba(161, 161, 161, 0.1);
+        padding: 0 12px;
+        transition-property: background-color, color;
+        transition-duration: 200ms;
+        transition-timing-function: ease-in-out;
+
+        & > .container {
+            & > .underline {
+                display: none;
+            }
+            & > .infix > .control > input {
+                &:-internal-autofill-selected {
+                    &,
+                    &:hover,
+                    &:active,
+                    &:valid {
+                        box-shadow: 0 0 0 40px #474747 inset;
+                        -webkit-text-fill-color: $color-font-dark
+                    }
+                }
+            }
+            & > .infix > .control > * {
+                color: $color-font-dark;
+
+                &::placeholder {
+                    color: $color-font-bg-dark;
+                }
+            }
+            & > .prepend,
+            & > .append,
+            & > .icons {
+                color: $color-font-bg-dark-marginal;
+            }
+        }
+        &.focused {
+            background-color: $color-font-dark;
+
+            & > .container {
+                & > .infix > .control > input {
+                    &:-internal-autofill-selected {
+                        &,
+                        &:hover,
+                        &:active,
+                        &:valid {
+                            box-shadow: 0 0 0 40px $color-font-dark inset;
+                            -webkit-text-fill-color: $color-font-bg
+                        }
+                    }
+                }
+                & > .infix > .control > * {
+                    color: $color-marginal;
+
+                    &::placeholder {
+                        color: $color-font-bg;
+                    }
+                }
+                & > .prepend,
+                & > .append,
+                & > .icons {
+                    color: $color-marginal;
+                }
+            }
+        }
+    }
+    &.not-empty,
+    &.focused,
+    &.invalid {
+        & > .container > .infix {
+            & > label {
+                top: 5px;
+                color: $color-primary;
+                padding: 0;
+                font-size: .75rem;
+            }
+            & > .control > * {
+                &[type=time],
+                &[type=date],
+                &[type=password] {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &.has-icons,
+    &.not-empty:hover,
+    &.not-empty.focused {
+        & > .container {
+            & > .append > append {
+                padding-left: 0;
+            }
+            & > .icons.pre {
+                padding-left: 12px;
+            }
+        }
+    }
+    &:not(.disabled):not(.readonly) {
+        &.focused > .container > .underline.focus {
+            left: 0;
+            width: 100%;
+        }
+        & > .container:hover > .underline.blur {
+            border-color: $color-input-underline-hover;
+        }
+        &.not-empty:hover,
+        &.not-empty.focused {
+            & > .container > .icons > vn-icon[icon=clear] {
+                display: initial;
+            }
+        }
+    }
+    &.readonly > .container {
+        & > .infix > .control > * {
+            caret-color: transparent;
+        }
+        & > .underline.blur {
+            border-bottom-style: dashed;
+        }
+    }
+    & > .hint {
+        padding: 4px 0;
+        height: 12px;
+        color: rgba(0, 0, 0, .4);
+        font-size: .75rem;
+        transform: translateY(-12px);
+        transition-property: opacity, transform, color;
+        transition-duration: 200ms;
+        transition-timing-function: ease-in-out;
+        opacity: 0;
+        visibility: hidden;
+
+        &.filled {
+            opacity: 1;
+            transform: translateY(0);
+            visibility: visible;
+        }
+    }
+    &.invalid {
+        & > .container {
+            & > .infix > label {
+                color: $color-alert;
+            }
+            & > .underline.focus {
+                background-color: $color-alert;
+            }
+            & > .underline.blur {
+                border-bottom-color: $color-alert;
+                opacity: 1;
+            }
+        }
+        & > .hint {
+            color: $color-alert;
+        }
+    }
+}
diff --git a/modules/supplier/front/fiscal-data/index.html b/modules/supplier/front/fiscal-data/index.html
index dbd45d09b1..3fe60a99a9 100644
--- a/modules/supplier/front/fiscal-data/index.html
+++ b/modules/supplier/front/fiscal-data/index.html
@@ -58,16 +58,12 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-textfield
+            <vn-account-number
                 vn-one
                 label="Account"
                 vn-name="account"
-                ng-model="$ctrl.supplier.account"
-                on-change="ctrl.accountShortToStandard(value)"
-                insertable="true"
-                max-length="10"
-                rule>
-            </vn-textfield>
+                ng-model="$ctrl.supplier.account">
+            </vn-account-number>
             <vn-autocomplete
                 vn-one
                 label="Sage tax type"
diff --git a/modules/supplier/front/fiscal-data/index.js b/modules/supplier/front/fiscal-data/index.js
index c4fc250b0d..8a6a51249f 100644
--- a/modules/supplier/front/fiscal-data/index.js
+++ b/modules/supplier/front/fiscal-data/index.js
@@ -75,11 +75,6 @@ export default class Controller extends Section {
         this.supplier.provinceFk = response.provinceFk;
         this.supplier.countryFk = response.countryFk;
     }
-
-    accountShortToStandard(value) {
-        this.accountNumber = value.replace('.', '0'.repeat(11 - value.length));
-        this.$.$emit('accountShortToStandard', this.accountNumber);
-    }
 }
 
 ngModule.vnComponent('vnSupplierFiscalData', {