Floating Labels

[lifegiro]

I thought it comes from start and as it is meanwhile a standard feature to save space ... it did not launch with flux ... but I am sure soon. When? Thank you a million times if available for Christmas 2024.

[Uhasith]

I Hope they are aware about this feature request 😃

[shokanshi]

Would love to see floating label implemented too.

[jdc1898]

How about this?

float-label-demo.webm

[jeffchown]

@jdc1898 If you created that using Flux, it'd be great if you could share a snippet to show how.

[jdc1898]

Floating Label Support for flux:input

Pure CSS floating labels via Tailwind peer selectors. Zero JS required.

Usage

<flux:input label="Email" float />
<flux:input label="Phone" float size="sm" />
<flux:input label="Company" float size="xs" variant="filled" />

Changes to input/index.blade.php

1. Add float prop

@props([
    // ... existing props ...
    'float' => null,
])

2. Float label extraction (after $inputAttributes line)

Strips label and placeholder from attributes when float is active, so <flux:with-field> doesn't render the label above the input.

$floatLabel = null;
if ($float) {
    $floatLabel = $attributes->get('label');
    $attributes = $attributes->except(array_filter([
        $floatLabel ? 'label' : null,
        'placeholder',
    ]));
}

3. Update size classes

Replace the existing $size match with a float-aware version. Float inputs are taller to make room for the label.

->add(match ($size) {
    default => ($float
        ? 'text-base sm:text-sm pt-5 pb-1 h-14 leading-[1.375rem]'
        : 'text-base sm:text-sm py-2 h-10 leading-[1.375rem]'),
    'sm' => ($float
        ? 'text-sm pt-4 pb-0.5 h-12 leading-[1.125rem]'
        : 'text-sm py-1.5 h-8 leading-[1.125rem]'),
    'xs' => ($float
        ? 'text-xs pt-3.5 pb-0 h-10 leading-[1.125rem]'
        : 'text-xs py-1.5 h-6 leading-[1.125rem]'),
})

4. Add peer class to input (after $classes is built)

if ($float) {
    $classes->add('peer placeholder-transparent');
}

5. Float label positioning classes (before @endphp)

$floatLabelClasses = null;
if ($float && $floatLabel) {
    $floatLabelClasses = Flux::classes()
        ->add('pointer-events-none absolute transition-all duration-200 ease-out')
        ->add($hasLeadingIcon ? 'start-10' : 'start-3')
        ->add('text-zinc-400 dark:text-zinc-400')
        ->add('peer-focus:text-zinc-500 dark:peer-focus:text-zinc-400')
        ->add(match ($size) {
            default => 'top-2 text-xs peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-base sm:peer-placeholder-shown:text-sm peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs',
            'sm' => 'top-1.5 text-xs peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:translate-y-0 peer-focus:text-xs',
            'xs' => 'top-1 text-[10px] peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-xs peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-[10px]',
        });
}

6. Add placeholder=" " to the <input> element

<?php if ($float): ?> placeholder=" " <?php endif; ?>

7. Render the floating label (after <input>, before trailing icons)

<?php if ($float && $floatLabel): ?>
    <label @class([$floatLabelClasses])>{{ $floatLabel }}</label>
<?php endif; ?>

How it works

• Input gets peer placeholder-transparent and a space placeholder
• The <label> is absolutely positioned inside the input wrapper
• peer-placeholder-shown: centers the label when the input is empty + unfocused
• peer-focus: floats the label to the top when focused or filled
• No JavaScript — the browser's native :placeholder-shown pseudo-class handles state

[jeffchown]

Thanks, @jdc1898