Form

<k-form>

• kirby/panel/src/components/Forms/Form.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 Form component takes a fields definition and a value/v-model to create a full featured form with grid and everything. If you "just" need the fields, go for the <k-fieldset> component instead.

Props

Prop	Type	Default	Description
config	object	–
disabled	boolean	–	Whether the form is disabled
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 form or the first one if no name is given
submit	–	Submit the form

Events

Event	Description	Passes
submit	When the form is submitted. This can be done in most inputs by hitting enter. It can also be triggered by a field component by firing a submit event. This will bubble up to the form and trigger a submit there as well. This is used in the textarea component for example to link the cmd+enter shortcut to a submit.	object value all field values

Slots

Slot	Description
default	If you want to replace the default fieldset
footer	Add something below the form
header	Add something above the form

Example

<template>
  <k-form v-model="contact" @input="input" @submit="submit" :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);
    },
    submit() {
      // let's send this thing to the server
      this.$api.post('/my/api', this.contact);
    }
  }
};
</script>

Keyboard Shortcuts

The Form component automatically registers the cmd+s shortcut to submit the form.

CSS classes

.k-form