yousefaman/filament-floating-labels

Material Design floating labels for Filament v4 form components

v0.1.1 2026-04-15 17:23 UTC

Requires

• php: ^8.2
• filament/filament: ^4.0
• spatie/laravel-package-tools: ^1.15.0

MIT

• Yousef Aman

• Forms
• laravel
• filament
• floating-labels

README

Material Design floating labels for Filament 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.

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

Component	Strategy
TextInput	CSS-only
Textarea	CSS-only
OneTimeCodeInput	CSS-only
Select / MultiSelect	Alpine.js
DateTimePicker / DatePicker / TimePicker	Alpine.js
ColorPicker	Alpine.js
TagsInput	Alpine.js

Installation

composer require yousefaman/filament-floating-labels

Usage

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

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

FilamentFloatingLabelsPlugin::make()
    ->global()                          // Enable for all supported components
    ->exceptTableFilters()              // Exclude table filters (default: true)

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

• PHP 8.2+
• Laravel 12+
• Filament v4

License

MIT License. See LICENSE.md for details.