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

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.