FloatLabel

Floating / in-field label wrapper

For where a stacked label costs too much height — a sign-in card, a search bar, a filter row. A long form defaults to Field: it has description, error and required, this has a label.

Basic

Name

Email

In-field (IFTA)

Notes

<script setup lang="ts">
import { ref } from "vue";
import { BlessFloatLabel, BlessInput, BlessTextarea } from "blessing-ui";
const name = ref("");
const mail = ref("[email protected]");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessFloatLabel label="Name"><BlessInput v-model="name" placeholder=" " /></BlessFloatLabel>
    </div>
    <div class="col">
      <BlessFloatLabel label="Email"
        ><BlessInput v-model="mail" placeholder=" " type="email"
      /></BlessFloatLabel>
    </div>
    <div class="col">
      <BlessFloatLabel label="In-field (IFTA)" variant="in"><BlessInput /></BlessFloatLabel>
    </div>
    <div class="col">
      <BlessFloatLabel label="Notes"><BlessTextarea placeholder=" " :rows="2" /></BlessFloatLabel>
    </div>
  </div>
</template>

• The control inside takes the wrapper's id, so the label is associated without for/id. for is there for a control that already has one.
• over (default) is CSS-only and floats on focus or value via :placeholder-shown, so the control needs a placeholder — placeholder=" " will do; it is hidden. The wrapper reserves the room above for the floated label.
• in keeps the label inside the control, top-aligned, and never moves; no placeholder needed.

Usage

import { BlessFloatLabel } from "blessing-ui";

API

Props

Name	Type	Default	Description
label*	string	—
for	string	—	id of the control; by default the control inside takes the wrapper's id
variant	"over" | "in"	"over"	over = floats up on focus/value; in = always inside, top-aligned (IFTA)

Slots

Name	Scope	Description
default	—