PHPackages yousefaman/filament-floating-labels - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. yousefaman/filament-floating-labels ActiveLibrary[Templating & Views](/categories/templating) yousefaman/filament-floating-labels =================================== Material Design floating labels for Filament v4 form components v0.1.1(3mo ago)16MITPHPPHP ^8.2 Since Apr 14Pushed 3mo agoCompare [ Source](https://github.com/yousef-aman/filament-floating-labels)[ Packagist](https://packagist.org/packages/yousefaman/filament-floating-labels)[ RSS](/packages/yousefaman-filament-floating-labels/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (2)Versions (3)Used By (0) Filament Floating Labels ======================== [](#filament-floating-labels) Material Design floating labels for [Filament](https://filamentphp.com) form components. The label sits inside the input when empty, then smoothly floats above the border when the field receives focus or has a value. [![Laravel](https://camo.githubusercontent.com/e4ed477e6a74318715e1339753f1e5fd5f7021a9ce0572836c049f0fa6a2c083/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322d726564)](https://camo.githubusercontent.com/e4ed477e6a74318715e1339753f1e5fd5f7021a9ce0572836c049f0fa6a2c083/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322d726564)[![PHP](https://camo.githubusercontent.com/3f55c87364aa35ec65a7ab89134395aeaa6e28f40f60be1006eaff8c088b40e9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322b2d707572706c65)](https://camo.githubusercontent.com/3f55c87364aa35ec65a7ab89134395aeaa6e28f40f60be1006eaff8c088b40e9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322b2d707572706c65)[![License](https://camo.githubusercontent.com/5caa455d8debc46fb23abbadb45a733a937f3910a73fc875c2f7820468e1bb54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e)](https://camo.githubusercontent.com/5caa455d8debc46fb23abbadb45a733a937f3910a73fc875c2f7820468e1bb54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e) Features -------- [](#features) - Automatic floating labels on all supported form components - Uses Filament's CSS custom properties for theming (matches your panel's primary color) - Full dark mode support - RTL support via CSS logical properties - Required field indicator (`*`) - Error and disabled state styling - Smart context detection: auto-excludes table filters - Per-field opt-in/opt-out Supported Components -------------------- [](#supported-components) ComponentStrategyTextInputCSS-onlyTextareaCSS-onlyOneTimeCodeInputCSS-onlySelect / MultiSelectAlpine.jsDateTimePicker / DatePicker / TimePickerAlpine.jsColorPickerAlpine.jsTagsInputAlpine.jsInstallation ------------ [](#installation) ``` composer require yousefaman/filament-floating-labels ``` Usage ----- [](#usage) ### Register the Plugin [](#register-the-plugin) Add the plugin to your panel provider: ``` use YousefAman\FilamentFloatingLabels\FilamentFloatingLabelsPlugin; public function panel(Panel $panel): Panel { return $panel // ... ->plugin( FilamentFloatingLabelsPlugin::make() ->global() // Apply to all supported components ->exceptTableFilters() // Don't apply in table filters (default) ); } ``` ### Per-Field Control [](#per-field-control) Even with global mode enabled, you can control individual fields: ``` // Disable floating label on a specific field TextInput::make('search') ->floatingLabel(false) // Enable manually (when global is off) TextInput::make('name') ->floatingLabel() // Custom label text TextInput::make('name') ->floatingLabel('Full Name') ``` ### Plugin Options [](#plugin-options) ``` FilamentFloatingLabelsPlugin::make() ->global() // Enable for all supported components ->exceptTableFilters() // Exclude table filters (default: true) ``` How It Works ------------ [](#how-it-works) The plugin uses two strategies depending on the component type: **CSS-only** (TextInput, Textarea, OneTimeCodeInput): Uses the `:placeholder-shown` CSS pseudo-selector to detect whether the field is empty, with no JavaScript required. **Alpine.js-assisted** (Select, DateTimePicker, ColorPicker, TagsInput): Registers a lightweight Alpine component that watches the Livewire state via `$wire.$get()` and toggles CSS classes (`has-value` / `no-value`). All styling uses Filament's CSS custom properties (`--primary-600`, `--danger-600`, `--gray-500`, etc.) so floating labels automatically match your panel's theme. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 12+ - Filament v4 License ------- [](#license) MIT License. See [LICENSE.md](LICENSE.md) for details. ### Health Score 34 — LowBetter than 75% of packages Maintenance81 Actively maintained with recent releases Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 100d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/59014877?v=4)[Yousef Aman](/maintainers/yousef-aman)[@yousef-aman](https://github.com/yousef-aman) --- Top Contributors [![yousef-aman](https://avatars.githubusercontent.com/u/59014877?v=4)](https://github.com/yousef-aman "yousef-aman (2 commits)") --- Tags laravelFormsfilamentfloating-labels ### Embed Badge ![Health badge](/badges/yousefaman-filament-floating-labels/health.svg) ``` [![Health](https://phpackages.com/badges/yousefaman-filament-floating-labels/health.svg)](https://phpackages.com/packages/yousefaman-filament-floating-labels) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.8k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16121.5k](/packages/backstage-mails)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 84215.9k9](/packages/stephenjude-filament-two-factor-authentication)[relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16354.2k](/packages/relaticle-custom-fields)[croustibat/filament-jobs-monitor Background Jobs monitoring like Horizon for all drivers for FilamentPHP 274333.4k9](/packages/croustibat-filament-jobs-monitor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)