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

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
      ]
    ];

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.

floating labels will be attached to custom created fields
or via hook alter

maybe it should be a setting configuration

@jannakha:

Not sure about this

floating labels will be attached to custom created fields
or via hook alter

maybe it should be a setting configuration

Do you mean this should be solved outside bootstrap5 theme with custom code? Or do you already have some way of integration for "Floating labels" in bootstrap5 theme?

What I'm not sure with this solution is how would I enable floating labels on webform? or on edit entity form?
do I need to override each textbox/selectbox in hooks to insert into attribute 'floating_label' => 1 ?

How do you do it?

Yes, I currently do it on an "as needed" base via hook or directly in my "own" forms.

This way it is surely no feature for the "common" user I guess, but others could maybe enhance their modules etc. with floating labels if they like.

Thinking about a setting from bootstrap5, I suppose one could only provide a general setting like "Use floating label" and the use it on every instance of the form elements. Maybe the setting could be split for different types like text input, textarea and select.

If you consider this for bootstrap5 let me know and I may take a look about this.

If at all this issue should wait for 🐛 Checkboxes and radios should conform to Bootstrap examples Active . so maybe we can postpone.