Fieldset

The Fieldset component is a wrapper around manual field component creation. You simply pass it an fields object and a v-model and all field components will automatically be created including a nice field grid. This is the ideal starting point if you want an easy way to create fields without having to deal with a full form element.

<template>
  <k-fieldset v-model="contact" @input="input" :fields="{
    name: {
      label: 'Your Name',
      type: 'text',
      required: true
    },
    email: {
      label: 'Email Address',
      type: 'email',
      required: true
    },
    message: {
      label: 'Your Message',
      minlength: 140,
      required: true,
      type: 'textarea'
    }
  }" />
</template>

<script>
export default {
  data() {
    return {
      contact: {
        name: null,
        email: null,
        message: null
      }
    }
  },
  methods: {
    input() {
      // the data is automatically updated
      console.log(this.contact);
    }
  }
};
</script>