diff --git a/exampleSite/content/app/test1.md b/exampleSite/content/app/test1.md
index 709aee2..cff0f5e 100644
--- a/exampleSite/content/app/test1.md
+++ b/exampleSite/content/app/test1.md
@@ -14,8 +14,8 @@ jsModule: main.ts
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.
 
-{{< pv/input-textline name="firstname" >}}
-{{< pv/input-textline name="lastname" >}}
+{{< pv/input-textline name="firstname" attrs="autofocus" >}}
+{{< pv/input-textline name="lastname" onchange="save" >}}
 
 {{< pv/display expr="`${data.firstname} ${data.lastname}`" >}}
 
diff --git a/layouts/shortcodes/pv/display.html b/layouts/shortcodes/pv/display.html
index d73449c..c6c45ed 100644
--- a/layouts/shortcodes/pv/display.html
+++ b/layouts/shortcodes/pv/display.html
@@ -1,5 +1,7 @@
-{{- $expr := .Get "expr" | default "data" -}}
-<div v-scope @vue:mounted="mounted('data')">
+{{- $name := .Get "name" | default "textline" -}}
+{{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
+{{- $default := .Get "default" | default "" -}}
+<div v-scope @vue:mounted="mounted('{{ $expr }}')">
   <pre v-text="{{ $expr }}"></pre>
 </div>
 
diff --git a/layouts/shortcodes/pv/input-textline.html b/layouts/shortcodes/pv/input-textline.html
index 470e4ef..a14c5ce 100644
--- a/layouts/shortcodes/pv/input-textline.html
+++ b/layouts/shortcodes/pv/input-textline.html
@@ -1,7 +1,11 @@
-{{- $name := default "textline" (.Get "name") }}
+{{- $type := .Get "type" | default "text" -}}
+{{- $name := .Get "name" | default "textline" -}}
+{{- $default := .Get "default" | default "" -}}
+{{- $attrs := .Get "attrs" | default "" -}}
+{{- $onchange := .Get "onchange" | default "" -}}
 <div v-scope>
-	<input type="text" name="{{ $name }}" autofocus
-		   v-model="data.{{ $name }}"
-		   @vue:mounted="data.{{ $name }} = ''"
- 		   @change="save()" />
+  <input type="{{ $type }}" name="{{ $name }}" {{ $attrs }}
+		 v-model="data.{{ $name }}"
+		 @vue:mounted="data.{{ $name }} = '{{ $default }}'"
+		 @change="{{ $onchange }}" />
 </div>