Skip to content
Forge

Floating label fields

Fields whose label slides above the entry, in pure CSS.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

The label remains a real label tied to the field: it takes the place of the placeholder, then rises as soon as the field is focused or filled, without any script. The label contrast stays compliant in both positions.

Code

Loading the code…

Archive contents

champs-libelle-flottant-html-tailwind.zip3 files · 3 Ko

  • index.html4 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Slot booking

    Free

    An appointment form: reason, day with the native date picker, morning and afternoon slots as radio buttons, full slots crossed out and a summary of the choice.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • File drop zone

    Coming soon

    An upload field that accepts drag and drop and lists the chosen files.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Preference switches

    Free

    A list of settings toggled with switches, each with a description.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Multi-step form

    Coming soon

    An appointment booking split into three steps, with a progress indicator.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
Floating label fields | Forge