Fieldset

<k-fieldset>

• kirby/panel/src/components/Forms/Fieldset.vue

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

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.

Props

Prop	Type	Default	Description
config	object	–
disabled	boolean	–
fields	array|object	function() { return []; }
novalidate	boolean	false	If true, form fields won't show their validation status on the fly.
value	object	{}

Methods

Method	Parameters	Description
focus	string name field name to focus	Focus a specific field in the fieldset or the first one if no name is given
hasField	string name field name	Check if a field with the given name exists in the fieldset
hasFieldType	string type field type	Check if a particular field type exists

Events

Event	Description	Passes
focus		–
input		–
invalid		–
submit		–

Example

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

CSS classes

.k-fieldset