Creating form

Craftable PRO comes with plenty form components to help you build your forms. You can use them with other components to quickly build forms even with complicated layouts. Examine the example bellow to see how to use them:

<template>
  <PageHeader :title="$t('craftable-pro', 'New form page')" />
 
  <PageContent>
    <Card :title="$t('craftable-pro', 'Some optional card title')">
      <div class="grid grid-cols-6 gap-6">
        <TextInput
          v-model="form.name"
          name="name"
          :label="$t('craftable-pro', 'Name')"
          class="col-span-6 sm:col-span-3"
        />
        <TextInput
          v-model="form.email"
          name="email"
          :label="$t('craftable-pro', 'E-mail')"
          type="email"
          class="col-span-6 sm:col-span-3"
        />
        <Multiselect
          v-model="form.locale"
          name="locale"
          :label="$t('craftable-pro', 'Locale')"
          mode="single"
          :options="locales"
          class="col-span-4 sm:col-span-2 sm:col-start-1"
        />
      </div>
 
      <template #footer>
        <CardFooter class="bg-gray-50 text-right">
          <button
            :leftIcon="ArrowDownTrayIcon"
            @click="submit"
            :loading="form.processing"
          >
            {{ $t("craftable-pro", "Save") }}
          </button>
        </CardFooter>
      </template>
    </Card>
  </PageContent>
</template>
<script setup lang="ts">
  import { PageHeader, PageContent } from 'craftable-pro/Components'
  import { ArrowDownTrayIcon } from "@heroicons/vue/24/outline";
  import {
    Button,
    Card,
    CardContent,
    CardFooter,
    TextInput,
    Multiselect,
  } from "craftable-pro/Components";
  import { useForm } from "craftable-pro/helpers";
 
  interface Props {
    locales?: string[];
  }
 
  const props = withDefaults(defineProps<Props>(), {
    locales: () => ["en"],
  });
 
  // This is detaily explained in the next section
  const { form, submit } = useForm(...);
</script>

useForm helper

Craftable PRO is built with InertiaJS (opens in a new tab). We use their useForm helper to handle form state and form submit. However we extended it to make it more flexible and to add some extra functionality.

To use it, import it using following import:

import { useForm } from "craftable-pro/helpers";

Then you can use it in your component like this:

<template>...</template>
<script setup lang="ts">
import { useForm } from "craftable-pro/helpers";
 
const { form, submit } = useForm(
  {
    name: "",
    email: "",
    locale: [],
  },
  route("craftable-pro-users.store"),
  "post"
);
</script>

First attribute is the form data object with the default values, second is the route and third is the route method (defaults to put).

Last updated on February 7, 2023

Building page Using filters in listing