Filament•2y ago

Help me understand Filament Form text-input field component source code

In the vendor package inside text-input.blade.php, (https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/text-input.blade.php), I can see code like this.

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <x-filament::input.wrapper
        :disabled="$isDisabled"
        :inline-prefix="$isPrefixInline"
        :inline-suffix="$isSuffixInline"
        :prefix="$prefixLabel"
        :prefix-actions="$prefixActions"
        :prefix-icon="$prefixIcon"
        :suffix="$suffixLabel"
        :suffix-actions="$suffixActions"
        :suffix-icon="$suffixIcon"
        :valid="! $errors->has($statePath)"
        class="fi-fo-text-input"
        :attributes="
            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                ->class(['overflow-hidden'])
        "
    >
        <x-filament::input
            :attributes="

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <x-filament::input.wrapper
        :disabled="$isDisabled"
        :inline-prefix="$isPrefixInline"
        :inline-suffix="$isSuffixInline"
        :prefix="$prefixLabel"
        :prefix-actions="$prefixActions"
        :prefix-icon="$prefixIcon"
        :suffix="$suffixLabel"
        :suffix-actions="$suffixActions"
        :suffix-icon="$suffixIcon"
        :valid="! $errors->has($statePath)"
        class="fi-fo-text-input"
        :attributes="
            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                ->class(['overflow-hidden'])
        "
    >
        <x-filament::input
            :attributes="

As a dev familiar with React (and new to Livewire components), I see this as props being passed to a component. Is this a correct assumption to make? My main question is: where in the source repository do I find the <x-dynamic-component /> component or the <x-filament::input /> component or the <x-filament::input /> component? I am a bit lost here because I don't see any imports on the top of the file

7 Replies

amiteOP•2y ago

ok I can see that some of these are coming from Laravel's core blade package: https://www.amitmerchant.com/dynamic-blade-components-in-laravel-8/

Amit Merchant

Dynamic blade components in Laravel 8

With the release of Laravel 8, you can now render Blade components dynamically using a built-in component called dynamic-component.

amiteOP•2y ago

I can see the docs for the input wrapper here: https://filamentphp.com/docs/3.x/support/blade-components/input-wrapper But where is the source code for the component?

Input wrapper Blade component - Core Concepts - Filament

amiteOP•2y ago

Aah,...I think I found it: https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/field-wrapper/index.blade.php

GitHub

filament/packages/forms/resources/views/components/field-wrapper/in...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

wyChoong•2y ago

Yes, it’s just blade components, so understanding Laravel Blade is the base to understand And the way filament uses it just more dynamic but you will get the gist by diving few more components

amiteOP•2y ago

@wyChoong do I need to understand how alpine is working underneath livewire If I want to build a custom filament component?

wyChoong•2y ago

you don't need alpine if you dont need js integration but with alpine you can make some interaction more "seemless"

amiteOP•2y ago

ok. marking as resolved

Gaming

Programming

Help me understand Filament Form text-input field component source code

Did you find this page helpful?