BaseFloatingLabel

The floating field label used by BaseInput and BaseTextarea, for labelling custom field-like controls.

import BaseFloatingLabel from "@wikicasa-dev/components/UIKit/BaseFloatingLabel";

BaseInput, BaseTextarea and BaseUploadFile already render it, so you only need it on its own to put the same label on a custom control (for example a dropdown trigger styled as a field) so it matches the other form fields.

It is absolutely positioned: place it inside a position: relative container that also holds the control, and nudge it with class / style / labelClasses (all land on the <label>). It doesn't animate by itself; you decide labelState.

#Usage

<script setup lang="ts">
import BaseFloatingLabel from "@wikicasa-dev/components/UIKit/BaseFloatingLabel";
</script>

<template>
  <div style="position: relative; padding: 16px; border: 1px solid rgb(var(--uikit-color-w-secondary)); border-radius: var(--uikit-radius-xs)">
    <button id="typology-trigger" type="button">Appartamento, Villa</button>
    <BaseFloatingLabel
      for="typology-trigger"
      label-text="Tipologia"
      label-state="floating-label"
      style="top: -9px; padding: 0 5px; background: #fff"
    />
  </div>
</template>

#Do / Don't

• Do pass for with the id of the control it labels.
• Do use labelState="floating-label" when the control has a value or focus, "inline-label" (default) to sit inside the field like a placeholder.
• Do give it a white background and a little horizontal padding when it floats over a border.
• Do pass required to show the asterisk; isValid colors it (red when false), disabled greys it out.
• Don't use it as a general-purpose text label or heading; it only makes sense over a field border.
• Don't use it next to BaseInput / BaseTextarea: they already have one.

#Styling hooks

• Root classes floating-label / inline-label reflect the state.
• labelClasses positions the <label>; labelTextClasses styles the text.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
labelState	LabelState	"inline-label"
isValid	Nullable<boolean>	null
labelText	string		yes
disabled	string | boolean	false
labelClasses	ClassTypeProp
labelTextClasses	ClassTypeProp

Events

Name	Payload
click	any[]

v-model

None.

Slots

None.

Exposed (template ref)

None.