Fields and visibility

Fields serialize a stable component discriminator plus their name, content metadata, validation rules, defaults, semantic state, visibility conditions, data attributes, metadata, and behavior-specific options. They describe behavior only; a field never chooses your Vue markup.

Field families

Every field supports labels, help text, placeholders, rules, defaults, authorization, visibility, data attributes, arbitrary metadata, and Laravel's when() and tap() fluent helpers.

TextInput::make('phone', 'Phone number')
    ->help('Include the country code.')
    ->placeholder('+380...')
    ->tel()
    ->required()
    ->dataAttribute('testId', 'phone')
    ->meta('analyticsKey', 'profile_phone');

dataAttributes() and meta() are serialized for your renderer. The package does not apply them to a DOM element automatically.

Conditional visibility

Use serializable conditions when visibility must react to client-side changes. The same conditions also control server-side validation.

use Inertify\Form\Conditions\Visibility;
use Inertify\Form\Fields\Checkbox;
use Inertify\Form\Fields\TextInput;

Checkbox::make('is_employed', 'Currently employed')
    ->default(false);

TextInput::make('company', 'Company')
    ->visibleWhen('is_employed', true)
    ->clearWhenHidden();

TextInput::make('tax_id', 'Tax ID')
    ->visibleWhenAll(fn (Visibility $when): Visibility => $when
        ->where('country', 'US')
        ->where('account_type', 'business'));

TextInput::make('approval_code', 'Approval code')
    ->visibleWhenAny([
        ['role', '=', 'owner'],
        ['role', '=', 'admin'],
    ]);

Available condition operators are =, !=, <, <=, >, >=, in, not_in, contains, empty, not_empty, truthy, and falsy. Related helpers include hiddenWhen(), visibleWhenIn(), hiddenWhenIn(), and visibleWhenNot().

Multiple visibility calls are combined with AND semantics. visibleWhenAll() and visibleWhenAny() create explicit groups. visible() and hidden() also accept booleans or closures, but closures resolve on the server; use field conditions for reactive browser behavior.

Conditions inside collections

Within a repeater or block row, an unprefixed dependency first resolves against that row when the key exists. Prefix a path with $. to force a root-form lookup.

Repeater::make('contacts')->schema([
    TextInput::make('kind')->required(),
    TextInput::make('company')
        ->visibleWhen('kind', 'business'),
    TextInput::make('billing_reference')
        ->visibleWhen('$.billing_enabled', true),
]);

The server excludes hidden and disabled values from validation. The Vue engine updates visibility immediately and, with clearWhenHidden(), replaces a newly hidden field with its field-specific empty value and clears its errors.

Fieldsets and authorization

Fieldsets support the same visibility and authorization APIs as fields. A hidden fieldset hides its descendants; an unauthorized fieldset and all of its fields are omitted from the resource.

Fieldset::make('Billing')
    ->id('billing')
    ->visibleWhen('billing_enabled', true)
    ->authorize(fn (): bool => auth()->user()->can('manageBilling'))
    ->fields([
        TextInput::make('billing_email')->email()->required(),
    ]);

On Vue, useFormVisibility() exposes visible and hidden fields and fieldsets plus isVisible() and isFieldsetVisible(). Renderless iterators hide invisible fields by default; pass include-hidden only when your UI intentionally needs them.