Skip to content

Kirby 3.7.5

Form

<k-form>

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