Svelte DataForm

A powerful, flexible, and type-safe form component for Svelte applications with built-in validation, responsive layout, and customizable styling.

Features

• 🎯 Type-safe form handling with TypeScript
• ✨ Built-in validation system
• 📱 Responsive grid layout (1-4 columns)
• 🎨 Tailwind CSS styling (ShadCN UI ready)
• 🗂️ File input support with accept attribute for file type restrictions
• 🔄 Real-time validation
• 💾 Form state management with reset handling (clears file inputs)
• 📋 Multiple input types support

Prerequisites

• SvelteKit ^2.x
• Tailwind CSS ^4.x
• PostCSS & Autoprefixer
• @tailwindcss/vite plugin

Installation

# Instala dependencias de desarrollo
npm install -D tailwindcss postcss autoprefixer @tailwindcss/vite
# Instala la librería
npm install sveltekit-dataform

Luego, en tu tailwind.config.js:

export default {
  content: ['./src/**/*.{html,svelte,ts}'],
  theme: { extend: {} },
  plugins: [],
};

Y en vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default {
  plugins: [tailwindcss(), sveltekit()]
};

Usage

<script lang="ts">
    import { DataForm } from 'sveltekit-dataform';
    import type { FormField } from 'sveltekit-dataform';

    const formSchema: FormField[] = [
        {
            name: 'resume',
            label: 'Resume',
            type: 'file',
            required: true,
            accept: '.pdf,.docx',
            columns: 2,
        },
        {
            name: "firstName",
            label: "First Name",
            type: "text",
            required: true,
            columns: 1,
            validation: (value: string) => {
                return value.length < 2 ? "First name must be at least 2 characters" : null;
            },
        },
        {
            name: "email",
            label: "Email",
            type: "email",
            required: true,
            columns: 1,
        }
    ];

    const initialData = {};

    function handleSubmit(data: Record<string, any>) {
        console.log('Form submitted:', data);
        // data.resume is a File object
    }
</script>

<DataForm 
    columns={2}
    schema={formSchema}
    data={initialData}
    onSubmit={handleSubmit}
/>

Field Types

The component supports the following field types:

• text
• email
• number
• textarea
• select
• checkbox
• radio
• file

Field Configuration

Each field in the schema accepts the following properties:

interface FormField {
    name: string;           // Field identifier
    label: string;         // Display label
    type: 'text' | 'email' | 'number' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'file';
    required?: boolean;   // Is field required?
    columns?: number;    // Number of columns to span (1-4)
    options?: {         // Options for select/radio
        value: string;
        label: string;
    }[];
    validation?: (value: any) => string | null; // Custom validation
    accept?: string;        // Accept attribute for file inputs
}

Responsive Layout

The form supports responsive grid layouts:

• Mobile: Single column
• Tablet/Desktop: Up to 4 columns (configurable)

Configure columns via the columns prop:

<DataForm columns={4} ... />

Individual fields can span multiple columns using the columns property in their definition.

Validation

Built-in Validation

• Required fields
• Email format
• Number type validation

Custom Validation

Add custom validation to any field:

{
    name: "age",
    label: "Age",
    type: "number",
    validation: (value: number) => {
        return value < 18 ? "Must be 18 or older" : null;
    }
}

Styling

The component uses Tailwind CSS classes by default and includes:

• Responsive design
• Focus states
• Error states
• Hover effects
• Disabled states

Events

• onSubmit: Triggered when form is valid and submitted
• Form data is automatically validated before submission

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | schema | FormField[] | [] | Form field definitions | | data | Record<string, any> | {} | Initial form data | | columns | 1-4 | 2 | Number of form columns | | onSubmit | Function | () => {} | Submit handler |

License

MIT

Contributing

Pull requests welcome! Asegúrate de seguir las guías de estilo y agregar tests cuando corresponda.