WithFloatingLabel

View source
An input component with a floating label and clear button.

Introduction

MWithFloatingLabel is an input component with a floating label effect. The label displays centered as a placeholder when the input is empty, and automatically floats upward when focused or when content is entered. It also has a built-in clear button that appears on the right when there is content.

Built on Nuxt UI's Input component

Usage

The label displays centered when empty, and automatically floats up when focused or when content is entered:

<script setup lang="ts">
const value = ref("test@example.com")
</script>

<template>
  <MWithFloatingLabel v-model="value" label="Email Address" />
</template>

leadingIcon Leading Icon

Add a leading icon to the input via leadingIcon:

<template>
  <MWithFloatingLabel label="Username" leading-icon="i-lucide-user" />
</template>

size Size

Switch input and label size via size:

<template>
  <MWithFloatingLabel label="Size Demo" size="md" />
</template>

clearButtonProps Clear Button

<script setup lang="ts">
const value = ref('test@example.com')
</script>

<template>
  <MWithFloatingLabel
    v-model="value"
    label="Email Address"
    :ui="{ label: 'text-warning' }"
    :clear-button-props="{ color: 'error', icon: 'i-lucide-x' }"
  />
</template>

Examples

Clear Event

Listen to clear actions via the @clear event:

<script setup lang="ts">
const toast = useToast()
const email = ref('user@example.com')

function handleClear() {
  toast.add({
    title: '已清除',
    description: '输入内容已清空',
    color: 'neutral'
  })
}
</script>

<template>
  <MWithFloatingLabel v-model="email" label="邮箱地址" leading-icon="i-lucide-mail" @clear="handleClear" />
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

labelstring
size"xs" | "sm" | "md" | "lg" | "xl"
clearButtonPropsButtonProps
idstring
namestring
type"number" | "color" | "button" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | string & {}
placeholderstring

The placeholder text when the input is empty.

color'primary'"primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral"
variant'outline'"outline" | "soft" | "subtle" | "ghost" | "none"
autocompletestring & {} | "on" | "off"
autofocusDelaynumber
defaultValueT
modelModifiersModelModifiers
iconany

Display an icon based on the leading and trailing props.

avatarAvatarProps

Display an avatar on the left side.

leadingIconany

Display an icon on the left side.

trailingIconany

Display an icon on the right side.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

liststring
maxstring | number
maxlengthstring | number
minstring | number
minlengthstring | number
patternstring
readonlyfalse | true | "true" | "false"
stepstring | number
modelValueT
requiredboolean
autofocusboolean
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints.

leadingboolean

When true, the icon will be displayed on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

loadingboolean

When true, the loading icon will be displayed.

uiRecord<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; label?: SlotClass; labelText?: SlotClass; }

Emits

Event Type
update:modelValue[value: T]
blur[event: FocusEvent]
change[event: Event]
clear[]

Slots

Slot Type
leading{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    withFloatingLabel: {
      slots: {
        base: 'peer',
        trailing: 'pe-1',
        label: 'pointer-events-none absolute -top-2.5 px-1.5 transition-all text-highlighted text-xs font-medium peer-focus:-top-2.5 peer-focus:text-highlighted peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-dimmed peer-placeholder-shown:font-normal peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-y-0',
        labelText: 'inline-flex bg-default px-1'
      },
      variants: {
        size: {
          xs: {
            label: 'peer-placeholder-shown:text-xs'
          },
          sm: {
            label: 'peer-placeholder-shown:text-xs'
          },
          md: {
            label: 'peer-placeholder-shown:text-sm'
          },
          lg: {
            label: 'peer-placeholder-shown:text-sm'
          },
          xl: {
            label: 'peer-placeholder-shown:text-base'
          }
        },
        hasLeading: {
          true: {},
          false: {
            label: 'left-0'
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          hasLeading: true,
          class: {
            label: 'left-5'
          }
        },
        {
          size: 'sm',
          hasLeading: true,
          class: {
            label: 'left-6'
          }
        },
        {
          size: 'md',
          hasLeading: true,
          class: {
            label: 'left-7'
          }
        },
        {
          size: 'lg',
          hasLeading: true,
          class: {
            label: 'left-8'
          }
        },
        {
          size: 'xl',
          hasLeading: true,
          class: {
            label: 'left-9'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        hasLeading: false
      }
    }
  }
})

Changelog

No recent changes

WithCopy

An input component with a copy-to-clipboard button.

WithPasswordToggle

A password input component with show/hide visibility toggle.

Copyright © 2025 - 2026 YiXuan - MIT License