Form

The Form component provides a comprehensive form wrapper with built-in validation, unsaved changes tracking, and automatic field management. It coordinates validation across all form fields, handles form submission, and provides methods for programmatic form control. Perfect for creating complex forms with multiple input fields that need coordinated validation and submission handling.

Basic form

The Form component wraps your form fields and provides automatic validation coordination. Form fields register themselves with the form automatically.

Source code

<template>
  <IkForm @ik-submit="handleSubmit">
    <IkTextField label="Name" required v-model="formData.name" placeholder="Enter your name" />
    <IkTextField label="Email" required v-model="formData.email" type="email" placeholder="Enter your email" />
    <IkButton type="submit" design="primary">Submit</IkButton>
  </IkForm>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const formData = ref({
  name: '',
  email: ''
});

const handleSubmit = () => {
  alert('Form submitted: ' + JSON.stringify(formData.value));
};
</script>

Form validation

By default, the form automatically validates all registered fields when submitted. The form will scroll to the first invalid field and prevent submission if validation fails.

Source code

<template>
  <IkForm @ik-submit="handleSubmit">
    <IkTextField label="Username" required v-model="formData.username" placeholder="Enter username" />
    <IkTextField label="Password" required v-model="formData.password" type="password" :rules="[passwordRule]" placeholder="Enter password" />
    <IkButton type="submit" design="primary">Submit</IkButton>
  </IkForm>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const formData = ref({
  username: '',
  password: ''
});

const passwordRule = (value) => {
  if (!value || value.length < 8) {
    return 'Password must be at least 8 characters';
  }
  return true;
};

const handleSubmit = () => {
  alert('Form is valid, submitting...');
};
</script>

View mode

Use the view_mode prop to display form data in a read-only format, perfect for showing information that users should view but not edit. This mode allows you to easily create an edit button that toggles the form between view and edit states.

Source code

<template>
  <IkForm :view_mode="true">
    <IkTextField label="Name" v-model="formData.name" />
    <IkTextField label="Email" v-model="formData.email" />
    <IkTextField label="Status" v-model="formData.status" />
  </IkForm>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { ref } from 'vue';

const formData = ref({
  name: 'John Doe',
  email: '[email protected]',
  status: 'Active'
});
</script>

Unsaved changes tracking

The form automatically tracks when fields are modified. Use the prompt_unsaved prop to enable a confirmation dialog when navigating away with unsaved changes. You can provide a boolean or a custom function for more control.

Source code

<template>
  <IkForm ref="formRef" :prompt_unsaved="true" @ik-submit="handleSubmit">
    <IkTextField label="Name" v-model="formData.name" placeholder="Enter your name" />
    <IkTextareaField label="Description" v-model="formData.description" placeholder="Enter description" />
    <IkButton type="submit" design="primary">Save</IkButton>
    <IkButton @click="checkDirty" design="default" class="ik-ml-4">Check Dirty</IkButton>
  </IkForm>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { IkTextareaField } from '@ikol/ui-kit/components/IkTextareaField';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const formRef = ref(null);
const formData = ref({
  name: '',
  description: ''
});

const handleSubmit = () => {
  alert('Form saved');
};

const checkDirty = () => {
  const isDirty = formRef.value?.isDirty();
  alert(`Form is ${isDirty ? 'dirty' : 'clean'}`);
};
</script>

Programmatic form control

Access the form instance using a template ref to programmatically control the form. Available methods include submit(), validate(), reset(), isDirty(), confirmCancel(), and resetValidation().

Source code

<template>
  <IkForm ref="formRef" @ik-submit="handleSubmit">
    <IkTextField label="Name" required v-model="formData.name" :rules="[requiredRule]" placeholder="Enter your name" />
    <IkTextField label="Email" required v-model="formData.email" type="email" :rules="[requiredRule]" placeholder="Enter your email" />
    <div class="ik-mt-4">
      <IkButton @click="submitForm" design="primary" class="ik-mr-4">Submit</IkButton>
      <IkButton @click="validateForm" design="default" class="ik-mr-4">Validate</IkButton>
      <IkButton @click="resetForm" design="default" class="ik-mr-4">Reset</IkButton>
      <IkButton @click="checkDirty" design="default">Check Dirty</IkButton>
    </div>
  </IkForm>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const formRef = ref(null);
const formData = ref({
  name: '',
  email: ''
});

const requiredRule = (value) => {
  if (!value || value.trim() === '') {
    return 'This field is required';
  }
  return true;
};

const submitForm = () => {
  formRef.value?.submit();
};

const validateForm = () => {
  const isValid = formRef.value?.validate();
  alert('Validation result: ' + isValid);
};

const resetForm = () => {
  formRef.value?.reset();
  formData.value = { name: '', email: '' };
};

const checkDirty = () => {
  const isDirty = formRef.value?.isDirty();
  alert('Form is dirty: ' + isDirty);
};

const handleSubmit = () => {
  alert('Form submitted: ' + JSON.stringify(formData.value));
};
</script>

Form skeleton

Use the skeleton prop to display a loading skeleton state for the form while data is being loaded.

Source code

<template>
  <div>
    <IkForm skeleton>
      <IkTextField label="Name" v-model="formData.name" placeholder="Enter your name" />
      <IkTextField label="Email" v-model="formData.email" placeholder="Enter your email" />
      <IkTextField label="Phone" v-model="formData.phone" placeholder="Enter phone number" />
    </IkForm>
  </div>
</template>
<script setup>
import { IkForm } from '@ikol/ui-kit/components/IkForm';
import { IkTextField } from '@ikol/ui-kit/components/IkTextField';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const formData = ref({
  name: '',
  email: '',
  phone: ''
});
</script>