diff --git a/tailbone/templates/deform/percentinput.pt b/tailbone/templates/deform/percentinput.pt
index 59b15341..40aa71f1 100644
--- a/tailbone/templates/deform/percentinput.pt
+++ b/tailbone/templates/deform/percentinput.pt
@@ -1,12 +1,14 @@
 <span tal:define="name name|field.name;
                   css_class css_class|field.widget.css_class;
                   oid oid|field.oid;
+                  field_name field_name|field.name;
                   mask mask|field.widget.mask;
                   mask_placeholder mask_placeholder|field.widget.mask_placeholder;
                   style style|field.widget.style;
-                  autocomplete autocomplete|field.widget.autocomplete|'off';
-"
+                  autocomplete autocomplete|field.widget.autocomplete|'off';"
       tal:omit-tag="">
+
+  <div tal:condition="not use_buefy" tal:omit-tag="">
     <input type="text" name="${name}" value="${cstruct}" 
            tal:attributes="class string: form-control ${css_class or ''};
                            style style;
@@ -22,4 +24,14 @@
                  {placeholder:"${mask_placeholder}"});
          });
     </script>
+  </div>
+
+  <div tal:condition="use_buefy"
+       tal:define="vmodel vmodel|'field_model_' + field_name;">
+    <!-- TODO: need to handle mask somehow? -->
+    <b-input name="${field_name}"
+             id="${oid}"
+             v-model="${vmodel}">
+    </b-input>
+  </div>
 </span>