Adds a custom input field to the example

example/src/App.vue

@@ -28,6 +28,16 @@
         validation-label="Password"
         validation="required|confirmed"
       />
+      <formulate-element
+        name="animal"
+        label="Spirit Animal"
+      >
+        <custom-input
+          v-model="animal"
+          :options="{eagle: 'Eagle', lion: 'Lion', sloth: 'Sloth'}"
+        />
+        <small>Example of a custom field using vue-formulate.</small>
+      </formulate-element>
       <formulate-element
         type="submit"
         name="Save"
@@ -42,12 +52,23 @@
 </template>
 
 <script>
+import CustomInput from './CustomInput.vue'
+import {mapModels} from 'vue-formulate'
+
 export default {
+  components: {
+    'custom-input': CustomInput
+  },
   data () {
     return {
       values: false
     }
   },
+  computed: {
+    ...mapModels({
+      animal: 'registration/animal'
+    })
+  },
   methods: {
     useFormData (vals) {
       this.values = JSON.stringify(vals, null, 2)
@@ -165,4 +186,11 @@ button:focus {
   outline: 0;
   border-color: #35495e;
 }
+
+small {
+  color: grey;
+  display: block;
+  font-size: .8em;
+  margin: .5em 0;
+}
 </style>

example/src/CustomInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <ul class="custom-input pill">
+    <li
+      v-for="(option, val) in options"
+      :key="val"
+      v-text="option"
+      :data-selected="val === value"
+      @click="$emit('input', val)"
+    />
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: [String, Number, Boolean],
+      default: false
+    }
+  }
+}
+</script>
+
+<style>
+.pill {
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  justify-content: space-between;
+}
+
+.pill li {
+  flex-grow: 1;
+  padding: .75em 1em;
+  text-align: center;
+  border: 1px solid #41b883;
+  cursor: pointer;
+}
+
+.pill li:hover {
+  background-color: rgba(65, 184, 131, .15);
+}
+
+.pill li[data-selected] {
+  color: white;
+  background-color: #41b883;
+}
+
+.pill li:first-child {
+  border-radius: .5em 0 0 .5em;
+  border-right: 0;
+}
+
+.pill li:last-child {
+  border-radius: 0 .5em .5em 0;
+  border-left: 0;
+}
+</style>