Floating labels for form inputs

[KHIT93]

Would be really great to have floating labels as a feature of this UI kit/library. Have just started to implement parts of it into a larger rewrite of an open-source app where I have currently built the feature myself.

Here is what I have built:

<template>
    <div class="relative border border-gray-300 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600" :class="{ 'cursor-not-allowed bg-gray-100 disabled:bg-gray-100': disabled }">
        <input :type="props.type" :name="props.inputId" :id="props.inputId" :aria-disabled="disabled" :disabled="disabled" class="block peer w-full border-0 p-0 text-gray-900 placeholder-transparent focus:ring-0 sm:text-sm" :class="{ 'cursor-not-allowed': disabled }" :value="props.modelValue" :placeholder="props.label" @input="emits('update:modelValue', $event.target.value)" />
        <label :for="props.inputId"
            class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-white text-xs text-gray-600 transition-all 
            peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2
            peer-focus:-top-2 peer-focus:left-2 peer-focus:-mt-px peer-focus:text-blue-600 peer-focus:text-xs" :class="[ disabled ? 'cursor-not-allowed' : 'peer-placeholder-shown:cursor-text' ]">{{ props.label }}</label>
    </div>
</template>

<script setup>
const props = defineProps(['modelValue', 'label', 'inputId', 'type', 'disabled'])
const emits = defineEmits(['update:modelValue'])
</script>

It is quite simple so would need some adjustment to inside the exisiting form input, but usage could be something like this:

<UInput variant="outline" />
<UInput variant="floating" />
<UInput variant="none" />

Example of this using TailwindCSS can be found here: https://www.material-tailwind.com/docs/react/input It is however for ReactJS

[benjamincanac]

You can use the UInputGroup component: https://ui.nuxtlabs.com/forms/input#group

[silverbackdan]

I think their point was that there could be variations on the UInputGroup which would allow foe the label to be as-is, outline or floating as the variants are in the link provided. Just for some more flexibility and perhaps 'app-like' micro-animations.

[benjamincanac]

Just made this PR: https://github.com/nuxtlabs/ui/pull/234 which might open possiblities for this.

[benjamincanac]

Closing this for now, feel free to reopen if the previous pr didn't fix your issue.

[shurth]

@benjamincanac - I'm not sure I'd want to reopen this, but I have the same use case. Looking at the structure of FormGroup, it doesn't look like we can use tailwind's whole "peer" approach for floating labels as the label doesn't follow the input. Do you have another suggestion for implementing?

[KHIT93]

Sorry for the late reply @benjamincanac Seems the FormGroup stuff is getting partially there, but not entirely something that I can get to what is shown in the link that shared initially. Seems others have showed interest in #514

[benjamincanac]

Will look into it when I get the chance 😊

[AnthonyRuelle]

Hello

I made the request last August for this evolution, is there any progress? (#514)

Thx

[stefanfrede]

I'm not 100% sure, but it seems to be solvable by either adding a property to switch the position of the label and input field, or adding an alternate label slot below the input field.