How to use filement input compoent in custom page

[iamaks1993]

Package

Other

Package Version

3.2

How can we help you?

Hi Filament team,

I am working on a custom page where I need to add custom design elements, but I want to maintain the default Filament UI styling for form inputs. While I have successfully implemented the Filament button and it matches the default styling, I'm facing an issue with the form input.

Here’s what works fine:

<x-filament::button type="submit"> {{ __('Save Task') }} </x-filament::button>. **Works great.** displayed same UI like filament.

This renders the button with the correct Filament UI.
However, when I try to use the following code for a date input: This add input but does not shows UI like filament.
<x-filament::input type="date" wire:model.live="date"/>

The input field does not adopt the same style as the Filament inputs.
Here’s the full Blade code I'm using:

<x-filament-panels::page> <x-filament-panels::form> <x-filament::input type="date" wire:model.live="date"/> <x-filament::button type="submit"> {{ __('Save Task') }} </x-filament::button> </x-filament-panels::form> </x-filament-panels::page>

What I want to achieve: I want the date input field to appear with the same UI styling as the Filament inputs (like the button).
Could someone guide me on how to properly use Filament form inputs in a Blade file while maintaining consistent styling?
Thanks!

[leandrocfe]

https://filamentphp.com/docs/3.x/support/blade-components/input/#overview

[iamaks1993]

Many thanks