Skip to content

Kirby 3.6.1.1

Fieldset

<k-fieldset>

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