Reference

Guide

Fieldset

<k-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>

Props

fields

Object (default: null)

validate

Boolean (default: false)

If true, all fields will show their validation status on the fly.

value (v-model)

Object (default: null)

Methods

focus(name)

Focus a specific field in the fieldset or the first one if no name is given

hasFieldType(type)

Check if a particular field type exists

hasField(name)

Check if a field with the given name exists in the fieldset

Events

input

Triggered whenever any field value changes

CSS Class

.k-fieldset