Allow for use of Bootstrap "Floating labels" on Drupal form elements

Created on 25 September 2024, 6 months ago

Problem/Motivation

Bootstrap is providing a cool feature of "Floating labels". It would be nice to use this feature with Drupal form elements.

Steps to reproduce

Proposed resolution

The idea is to add to attributes of the form element to indicate the use of "Floating labels".

Example:
Standard form element

    $form['textfield'] = [
      '#type' => 'textfield',
      '#title' => 'Password'
    ];

Form Element with "Floating label":

    $form['textfield'] = [
      '#type' => 'textfield',
      '#title' => 'Textfield',
      '#attributes' => [
        'placeholder' => 'Textfield',
        'floating_label' => 1
      ]
    ];

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

4.0

Component

Code

Created by

🇩🇪Germany stefan.korn Jossgrund

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @stefan.korn
  • Pipeline finished with Failed
    6 months ago
    Total: 210s
    #292107
  • 🇩🇪Germany stefan.korn Jossgrund

    Screenshot of regular textfield and textfield with floating label:

    Screenshot of regular textfield and textfield with floating label in focus:

    Code is

        $form['text'] = [
          '#type' => 'textfield',
          '#title' => 'Textfield',
        ];
    
        $form['text_float'] = [
          '#type' => 'textfield',
          '#title' => 'Textfield',
          '#attributes' => [
            'placeholder' => 'Password',
            'floating_label' => 1
          ]
        ];
    
  • 🇩🇪Germany stefan.korn Jossgrund

    This will possibly conflict with some other MRs I have created, because of using preprocess_form_element and preprocess_input in these MRs too. If acceptable the MRs would need to be processed on after another and need to be rerolled.

Production build 0.71.5 2024