FloatingLabelsRails

Floating label form fields pour Rails avec Tailwind CSS et Stimulus.

Un gem Rails qui fournit des champs de formulaire avec labels flottants (style Bootstrap) en utilisant Tailwind CSS et Stimulus, sans aucune dépendance à Bootstrap.

Ajoutez cette ligne au Gemfile de votre application :

gem 'floating_labels_rails'

Puis exécutez :

bundle install
rails generate floating_labels_rails:install

• Rails >= 6.0
• Tailwind CSS configuré dans votre application
• Stimulus JS

<%= form_with model: @user, builder: FloatingLabelsRails::FormBuilder do |f| %>
  <%= f.floating_text_field :first_name, label: "Prénom", required: true %>
  <%= f.floating_email_field :email, label: "Email", required: true %>
  <%= f.floating_password_field :password, label: "Mot de passe" %>
  <%= f.submit %>
<% end %>

Pour utiliser le Form Builder par défaut dans toute votre application, ajoutez dans config/application.rb :

config.action_view.default_form_builder = FloatingLabelsRails::FormBuilder

Après cela, tous vos formulaires utiliseront automatiquement le builder :

<%= form_with model: @user do |f| %>
  <%= f.floating_text_field :name %>
<% end %>

# Champs texte
<%= f.floating_text_field :name %>
<%= f.floating_email_field :email %>
<%= f.floating_password_field :password %>  # Avec toggle show/hide
<%= f.floating_telephone_field :phone %>
<%= f.floating_url_field :website %>
<%= f.floating_number_field :age %>
<%= f.floating_date_field :birth_date %>

# Select
<%= f.floating_select :country, [["France", "FR"], ["Belgique", "BE"]] %>
<%= f.floating_collection_select :category_id, Category.all, :id, :name %>

# Textarea
<%= f.floating_text_area :bio, rows: 5 %>

Tous les champs acceptent ces options :

• label : Texte du label (par défaut : humanize de l'attribut)
• required : Affiche un astérisque rouge (par défaut : false)
• class : Classes CSS additionnelles

<%= f.floating_text_field :name, 
    label: "Nom complet", 
    required: true,
    class: "my-custom-class" %>

Les erreurs de validation sont automatiquement affichées :

• Bordure rouge sur le champ
• Label en rouge
• Message d'erreur sous le champ

Vous pouvez personnaliser les couleurs Tailwind en modifiant les classes dans le Form Builder.

Par défaut, le gem utilise :

• blue-500 pour le focus
• red-500 pour les erreurs
• gray-300 pour les bordures

Après avoir cloné le repo :

bundle install

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

Le gem est disponible en open source sous les termes de la MIT License.