Form Component Examples

Overview

RSL provides two form systems that can be built via the JSON API V2:

Modern Forms

Dark-theme friendly, custom-styled controls with CSS variables for theming. Uses form-elements.css.

formStyle: "modern" (default)

Basic Forms

Lightweight, browser-native controls with minimal styling. Uses form.css.

formStyle: "basic"

Supported Field Types

Text inputs (text, email, password, etc.)

Textarea

Chips (Modern) / Checkboxes (Basic)

Choice Cards (Modern) / Radios (Basic)

Custom Select / Native Select

Toggle switches

Range sliders

File upload with drag-and-drop

Fieldset groups

Form validation

Example 1: Modern Form - Contact

A contact form using the Modern Form system with field tiles, toggles, and custom styling.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "modern-contact-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "modern",  // Default
            id: "contact",
            fields: [
                {
                    fieldType: "text",
                    name: "name",
                    label: "Full Name",
                    placeholder: "Enter your name",
                    required: true,
                    prefixIcon: "fas fa-user"
                },
                {
                    fieldType: "email",
                    name: "email",
                    label: "Email Address",
                    placeholder: "you@example.com",
                    required: true,
                    prefixIcon: "fas fa-envelope"
                },
                {
                    fieldType: "textarea",
                    name: "message",
                    label: "Message",
                    placeholder: "How can we help?",
                    rows: 4
                },
                {
                    fieldType: "toggle",
                    name: "subscribe",
                    label: "Subscribe to Newsletter",
                    helper: "Get weekly updates",
                    checked: true
                }
            ],
            submitButton: { text: "Send Message", icon: "fas fa-paper-plane" }
        }
    }]
});

Example 2: Basic Form - Registration

A registration form using the Basic Form system with native browser controls.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "basic-registration-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "basic",
            id: "registration",
            fields: [
                {
                    fieldType: "text",
                    name: "fullName",
                    label: "Full Name",
                    placeholder: "John Doe",
                    required: true
                },
                {
                    fieldType: "email",
                    name: "email",
                    label: "Email",
                    placeholder: "john@example.com",
                    required: true
                },
                {
                    fieldType: "password",
                    name: "password",
                    label: "Password",
                    placeholder: "Create a password",
                    required: true
                },
                {
                    fieldType: "select",
                    name: "country",
                    label: "Country",
                    placeholder: "Select your country",
                    options: [
                        { value: "us", label: "United States" },
                        { value: "uk", label: "United Kingdom" },
                        { value: "ca", label: "Canada" },
                        { value: "au", label: "Australia" }
                    ]
                },
                {
                    fieldType: "radio",
                    name: "accountType",
                    label: "Account Type",
                    selectFirst: true,
                    options: [
                        { value: "personal", label: "Personal" },
                        { value: "business", label: "Business" },
                        { value: "enterprise", label: "Enterprise" }
                    ]
                },
                {
                    fieldType: "checkbox",
                    name: "interests",
                    label: "Interests",
                    options: [
                        { value: "tech", label: "Technology" },
                        { value: "design", label: "Design" },
                        { value: "business", label: "Business" }
                    ]
                }
            ],
            submitButton: { text: "Create Account" }
        }
    }]
});

Example 3: Modern Form - Chips and Choice Cards

Form with chip-style checkboxes and radio choice cards.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "preferences-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "modern",
            id: "preferences",
            fields: [
                {
                    fieldType: "chips",
                    name: "interests",
                    label: "Select Your Interests",
                    options: [
                        { value: "tech", label: "Technology", checked: true },
                        { value: "design", label: "Design" },
                        { value: "business", label: "Business" },
                        { value: "science", label: "Science" }
                    ]
                },
                {
                    fieldType: "choiceCards",
                    name: "plan",
                    label: "Choose Your Plan",
                    selectFirst: true,
                    options: [
                        { title: "Basic", price: "Free", description: "Perfect for getting started" },
                        { title: "Pro", price: "$9/mo", description: "Best for professionals" },
                        { title: "Enterprise", price: "$29/mo", description: "For large teams" }
                    ]
                }
            ],
            submitButton: { text: "Continue" }
        }
    }]
});

Example 4: File Upload with Drag-and-Drop

Modern file upload tiles with drag-and-drop and image preview.

Drag-and-Drop Enabled: File tiles automatically support drag-and-drop with image preview. Try dragging an image file!

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "upload-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "modern",
            id: "upload",
            fields: [
                {
                    fieldType: "select",
                    name: "category",
                    label: "Document Category",
                    placeholder: "Select a category...",
                    fullWidth: true,
                    options: [
                        { value: "resume", label: "Resume" },
                        { value: "portfolio", label: "Portfolio" },
                        { value: "certificate", label: "Certificate" }
                    ]
                },
                {
                    fieldType: "file",
                    name: "images",
                    title: "Drag images here or click to upload",
                    helper: "PNG, JPG, or GIF (max 10MB)",
                    accept: "image/*",
                    multiple: true,
                    enablePreview: true  // Enables drag-and-drop with preview
                },
                {
                    fieldType: "file",
                    name: "documents",
                    title: "Upload Documents",
                    helper: "PDF, DOC, or DOCX",
                    accept: ".pdf,.doc,.docx",
                    icon: "",
                    enablePreview: true
                }
            ],
            submitButton: { text: "Upload Files", icon: "fas fa-cloud-upload-alt" }
        }
    }]
});

Example 5: Basic Form with Drag-and-Drop Area

Basic form with a legacy-style drag-and-drop upload area.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "basic-upload-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "basic",
            id: "basic-upload",
            fields: [
                {
                    fieldType: "text",
                    name: "title",
                    label: "File Title",
                    placeholder: "Enter a title for your upload"
                },
                {
                    fieldType: "file",
                    name: "files",
                    label: "Upload Files",
                    title: "Drop files here or click to upload",
                    enableDragDrop: true,  // Uses legacy drag-and-drop area
                    multiple: true
                },
                {
                    fieldType: "textarea",
                    name: "description",
                    label: "Description",
                    placeholder: "Add a description...",
                    rows: 3
                }
            ],
            submitButton: { text: "Submit" }
        }
    }]
});

Example 6: Sliders and Settings

Forms with range sliders and toggle settings.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "settings-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "modern",
            id: "settings",
            fields: [
                {
                    fieldType: "toggle",
                    name: "notifications",
                    label: "Enable Notifications",
                    helper: "Receive email updates",
                    checked: true
                },
                {
                    fieldType: "toggle",
                    name: "darkMode",
                    label: "Dark Mode",
                    helper: "Use dark theme",
                    onColor: "#6E7BFF"
                },
                {
                    fieldType: "slider",
                    name: "volume",
                    label: "Volume",
                    min: 0,
                    max: 100,
                    value: 75,
                    suffix: "%",
                    fullWidth: true
                },
                {
                    fieldType: "slider",
                    name: "brightness",
                    label: "Brightness",
                    min: 0,
                    max: 100,
                    value: 50,
                    suffix: "%",
                    fillColor: "#ffc107",
                    fullWidth: true
                }
            ],
            submitButton: { text: "Save Settings" }
        }
    }]
});

Example 7: Grouped Fields with Fieldsets

Organize related fields into groups using fieldsets.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "grouped-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "modern",
            id: "grouped",
            fields: [
                {
                    fieldType: "fieldset",
                    legend: "Personal Information",
                    fields: [
                        { fieldType: "text", name: "firstName", label: "First Name", placeholder: "John" },
                        { fieldType: "text", name: "lastName", label: "Last Name", placeholder: "Doe" },
                        { fieldType: "email", name: "email", label: "Email", placeholder: "john@example.com" }
                    ]
                },
                {
                    fieldType: "fieldset",
                    legend: "Account Settings",
                    fields: [
                        { fieldType: "password", name: "password", label: "Password", placeholder: "Create a password" },
                        { fieldType: "password", name: "confirmPassword", label: "Confirm Password", placeholder: "Confirm password" },
                        { fieldType: "toggle", name: "newsletter", label: "Subscribe to Newsletter", helper: "Get weekly updates" }
                    ]
                }
            ],
            submitButton: { text: "Create Account" }
        }
    }]
});

Example 8: Form Validation

This example demonstrates how to use form-validation.js with the V2 API. Fields marked as required: true automatically receive the input-required class, enabling real-time validation.

// Render form with required fields
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "validated-form",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "form",
            formStyle: "basic",
            id: "validationDemo",
            fields: [
                { fieldType: "text", name: "name", label: "Full Name", placeholder: "Enter your name", required: true },
                { fieldType: "email", name: "email", label: "Email Address", placeholder: "you@example.com", required: true },
                { fieldType: "password", name: "password", label: "Password", placeholder: "Min 8 characters", required: true },
                { fieldType: "select", name: "country", label: "Country", required: true, placeholder: "Select a country", options: [
                    { value: "us", label: "United States" },
                    { value: "uk", label: "United Kingdom" },
                    { value: "ca", label: "Canada" }
                ]}
            ],
            submitButton: { text: "Submit" }
        }
    }]
});

// Validate the form programmatically
var form = document.getElementById('validationDemo');
if (RSL.FormValidation && RSL.FormValidation.validateForm) {
    var isValid = RSL.FormValidation.validateForm(form);
    console.log('Form valid:', isValid);
}

// OR add submit listener with validation
form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (RSL.FormValidation.validateForm(form)) {
        // Form is valid - submit data
        console.log('Submitting form...');
    }
});

How Form Validation Works

Fields with required: true get the input-required class
Forms are rendered with novalidate to let JavaScript handle validation
Email fields validate format automatically (e.g., must contain @ and domain)
Empty required fields show error styling with red borders
Errors clear in real-time as users type corrections
Use RSL.FormValidation.validateForm(form) to validate programmatically

API Reference

Form Configuration

Property	Type	Description
`type`	string	Must be "form"
`formStyle`	string	"modern" (default) or "basic"
`id`	string	Form element ID
`fields`	array	Array of field configurations
`submitButton`	object	{ text, icon, variant }
`cancelButton`	object	{ text, variant }

Field Types by Form Style

Modern Form	Basic Form	Description
`text, email, password, etc.`	`text, email, password, etc.`	Text input fields
`textarea`	`textarea`	Multi-line text
`chips`	`checkbox`	Multiple selection
`choiceCards`	`radio`	Single selection
`select`	`select`	Dropdown selection
`toggle`	-	Toggle switch (modern only)
`slider`	`range`	Range slider
`file`	`file`	File upload
`fieldset`	`fieldset`	Field group