---
title: "WithFloatingLabel"
description: "An input component with a floating label and clear button."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/components/with-floating-label"
---
# WithFloatingLabel

> 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.

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/input
> 
> 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:

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

<template>
  <MWithFloatingLabel label="Email Address" />
</template>
```

### `leadingIcon` Leading Icon

Add a leading icon to the input via `leadingIcon`:

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

### `size` Size

Switch input and label size via `size`:

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

### `clearButtonProps` Clear Button

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

<template>
  <MWithFloatingLabel 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:

```vue [ComponentsWithFloatingLabelClearExample.vue]
<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

```ts
/**
 * Props for the MWithFloatingLabel component
 */
interface MWithFloatingLabelProps {
  label?: string | undefined;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  clearButtonProps?: ButtonProps | undefined;
  ui?: Record<string, C> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; label?: SlotClass; labelText?: SlotClass; } | undefined;
  /**
   * The element or component this component should render as.
   * @default 'div'
   */
  as?: any;
  id?: string | undefined;
  name?: string | undefined;
  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 & {} | undefined;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  /**
   * @default 'primary'
   */
  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral" | undefined;
  /**
   * @default 'outline'
   */
  variant?: "outline" | "soft" | "subtle" | "ghost" | "none" | undefined;
  required?: boolean | undefined;
  autocomplete?: string & {} | "on" | "off" | undefined;
  autofocus?: boolean | undefined;
  autofocusDelay?: number | undefined;
  disabled?: boolean | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Keep the mobile text size on all breakpoints.
   */
  fixed?: boolean | undefined;
  defaultValue?: T | undefined;
  modelModifiers?: ModelModifiers | undefined;
  /**
   * Display an icon based on the `leading` and `trailing` props.
   */
  icon?: any;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the icon will be displayed on the left side.
   */
  leading?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  leadingIcon?: any;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: any;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * The icon when the `loading` prop is `true`.
   * @default appConfig.ui.icons.loading
   */
  loadingIcon?: any;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: false | true | "true" | "false" | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
  max?: string | number | undefined;
  maxlength?: string | number | undefined;
  min?: string | number | undefined;
  minlength?: string | number | undefined;
  pattern?: string | undefined;
  readonly?: false | true | "true" | "false" | undefined;
  step?: string | number | undefined;
  modelValue?: T | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MWithFloatingLabel component
 */
interface MWithFloatingLabelEmits {
  update:modelValue: (payload: [value: T]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
  clear: (payload: []) => void;
  update:modelValue: (payload: [value: T | undefined]) => void;
}
```

### Slots

```ts
/**
 * Slots for the MWithFloatingLabel component
 */
interface MWithFloatingLabelSlots {
  leading(): any;
}
```

## Theme

<component-theme>



</component-theme>

## Changelog

See commit history for [src/runtime/components/input/WithFloatingLabel.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/input/WithFloatingLabel.vue).


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.