Data Attributes and Meta

Data Attributes

Data attributes let you attach data-* HTML attributes to the rendered <form> element. They are useful for analytics tracking, end-to-end test selectors, or any DOM-level metadata.

Setting Data Attributes

Use dataAttribute() to set a single attribute, or dataAttributes() to set several at once:

class ContactForm extends Form
{
    protected ?string $actionRoute = 'contact.store';

    public function fields(): array
    {
        return [
            TextInput::make('name')->required(),
            TextInput::make('email')->email()->required(),
            Textarea::make('message')->required(),
            Submit::make('Send'),
        ];
    }
}

// In your controller
$form = ContactForm::make()
    ->dataAttribute('formId', 'contact-v2')
    ->dataAttribute('source', 'landing-page');

Keys are automatically converted to kebab-case and prefixed with data-. The example above renders:

<form data-form-id="contact-v2" data-source="landing-page" ...>

You may also pass an array:

$form = ContactForm::make()
    ->dataAttributes([
        'formId' => 'contact-v2',
        'source' => 'landing-page',
    ]);

Use Cases

Analytics tracking: Tag forms so your analytics tool may identify which form was submitted.

$form->dataAttribute('analyticsEvent', 'signup-form-submit');

E2E testing: Add stable selectors for Playwright or Cypress tests.

$form->dataAttribute('testId', 'create-user-form');

Meta

Meta is a free-form key-value store that is passed to the frontend as part of the form config. Unlike data attributes, meta values do not render as HTML attributes. They are available in JavaScript for conditional rendering, feature flags, or any custom logic.

Calling meta() replaces the previously assigned application meta array. During serialization, fields that publish generated option data merge it under meta.options, preserving existing entries with different option keys.

Setting Meta

$form = CreateUserForm::make()
    ->meta([
        'showAdvancedOptions' => $user->isAdmin(),
        'maxFileSize' => 5120,
        'helpUrl' => 'https://docs.example.com/users',
    ]);

Accessing Meta

The meta object is available on the form config:

Vue

<script setup lang="ts">
import { Form } from '@inertiaui/form-vue'

const props = defineProps<{
    form: object
}>()
</script>

<template>
    <Form :form="form">
        <template #default="{ form }">
            <a
                v-if="form.config.meta?.helpUrl"
                :href="form.config.meta.helpUrl"
                target="_blank"
            >
                Need help?
            </a>
        </template>
    </Form>
</template>

React

import { Form } from '@inertiaui/form-react'

export default function CreateUser({ form }) {
    return (
        <Form form={form}>
            {(formInstance) => (
                formInstance.config.meta?.helpUrl ? (
                    <a href={formInstance.config.meta.helpUrl} target="_blank">
                        Need help?
                    </a>
                ) : null
            )}
        </Form>
    )
}

Use Cases

Conditional rendering: Show or hide parts of the form based on server-side logic without duplicating the logic in your frontend.

$form->meta(['showBillingFields' => $plan->isPaid()]);

Passing reference data: Send data that the form needs but that is not a field value.

$form->meta([
    'currencies' => ['USD', 'EUR', 'GBP'],
    'defaultCurrency' => 'USD',
]);

Feature flags: Toggle experimental fields or behaviors.

$form->meta(['enableAiSuggestions' => Feature::active('ai-suggestions')]);

Differences

	Data Attributes	Meta
Rendered in HTML	Yes (data-* on <form>)	No
Available in JS	Via DOM	Via form.config.meta
Key format	Auto kebab-cased	As-is
Typical use	Analytics, test selectors	Conditional logic, reference data