Forms Documentation

Appearance

Display Helpers ​

Display helpers render PHP-authored context inside auto-rendered forms. They are lightweight form helpers, not a general application UI kit: use them for headings, short instructions, separators, and scoped notices that belong to the form.

All display helpers have a null name and are excluded from Form::data().

Heading ​

Heading renders a real heading element. Levels are limited to 1 through 4 so headings stay useful inside form layouts.

Example

Billing details

Advanced settings

php
use InertiaUI\Forms\Fields\Heading;

Heading::make('Billing details')->h2();

Heading::make('Advanced settings')->level(3);

Use text() to set the heading text after construction. Use level() or the h1() through h4() shortcuts for the element level.

Text ​

Text renders escaped paragraph copy.

Example

Use the legal entity name that should appear on invoices.

php
use InertiaUI\Forms\Fields\Text;

Text::make('Use the legal entity name that should appear on invoices.');

Set the copy later with text() or content():

php
Text::make()->content('Short form-specific helper copy.');

Html ​

Html renders raw HTML from the PHP form definition.

Example

Trusted author content with a guide.

php
use InertiaUI\Forms\Fields\Html;

Html::make('<p><strong>Trusted</strong> author content with a <a href="/introduction">guide</a>.</p>');

Set the markup later with html() or content().

Security

Html is for trusted author content only. It is rendered raw, is not sanitized by the frontend package, and must not be bound to end-user input or untrusted CMS content.

Separator ​

Separator renders an <hr> between form sections.

Example

Account details

Review settings

php
use InertiaUI\Forms\Fields\Separator;

Separator::make();
Separator::make()->sm();
Separator::make()->lg();
Separator::make()->spacing('none');

Available spacing values are none, sm, md, and lg.

Callout ​

Callout renders a form-scoped notice. Variants are info, success, warning, and danger.

Example

Saved default

This account starts with safe defaults.

php
use InertiaUI\Forms\Fields\Callout;

Callout::make('Review required', 'Confirm the billing contact before saving.')
    ->warning();

Callout::make('Saved default', 'This account starts with safe defaults.')
    ->success();

Warnings and danger callouts render with alert semantics. Info and success callouts render with status semantics.

Set content or tone after construction with title(), body(), and variant(). The info(), success(), warning(), and danger() shortcuts set the same tone values.

You may pass an icon name resolved by the frontend icon resolver. See Icons:

php
Callout::make('Heads up', 'This copy belongs to the form.')
    ->info()
    ->icon('InfoIcon');

Styling ​

Use class() for helper-specific styling. In multi-column fieldsets, display helpers automatically span the full grid width.

php
Heading::make('Danger zone')->class('text-iui-form-destructive');
Callout::make('Careful', 'This action is permanent.')->danger()->class('my-2');

Shared Field APIs ​

Display helpers use Styling for class(), Conditional Visibility, and Authorization. They do not submit values, so Model Binding and Validation do not add form data or validation rules for them.

Using the Component Directly ​

Display helpers are exported from the component subpath. They take no form value, so render them directly without v-model or onValueChange.

vue
<script setup lang="ts">
import { AlertTriangle as AlertTriangleIcon } from '@lucide/vue'
import { Callout, Heading, Html, Separator, Text } from '@inertiaui/form-vue/components'
import type { IconResolverFn } from '@inertiaui/form-vue'

const icons = { AlertTriangleIcon }
const iconResolver: IconResolverFn = (icon) => icons[icon as keyof typeof icons] ?? null
</script>

<template>
    <section class="grid gap-4">
        <Heading id="billing-details" text="Billing details" :level="2" />

        <Text text="Use the legal entity name that should appear on invoices." />

        <Html html="<p><strong>Trusted</strong> author content.</p>" />

        <Callout
            variant="warning"
            title="Review required"
            body="Confirm the billing contact before saving."
            icon="AlertTriangleIcon"
            :icon-resolver="iconResolver"
            wrapper-class="max-w-xl"
        />

        <Separator spacing="md" />
    </section>
</template>
tsx
import { AlertTriangleIcon } from 'lucide-react'
import { Callout, Heading, Html, Separator, Text } from '@inertiaui/form-react/components'
import type { IconResolverFn } from '@inertiaui/form-react'

const icons = { AlertTriangleIcon }
const iconResolver: IconResolverFn = (icon) => icons[icon as keyof typeof icons] ?? null

export default function BillingDetails() {
    return (
        <section className="grid gap-4">
            <Heading id="billing-details" text="Billing details" level={2} />

            <Text text="Use the legal entity name that should appear on invoices." />

            <Html html="<p><strong>Trusted</strong> author content.</p>" />

            <Callout
                variant="warning"
                title="Review required"
                body="Confirm the billing contact before saving."
                icon="AlertTriangleIcon"
                iconResolver={iconResolver}
                wrapperClass="max-w-xl"
            />

            <Separator spacing="md" />
        </section>
    )
}

Pass trusted author-controlled HTML only to Html. Callout icons use the same Icons resolver as generated forms.

Native attributes and listeners target the rendered root element. See Native Attributes And Events.