WithClear

An input component with a clear button.

Introduction

MWithClear is an input component with a one-click clear function. When the input has content, a clear button (×) appears on the right. Clicking it quickly clears the input.

Built on Nuxt UI's Input component

Usage

A clear button appears on the right automatically when there is content:

<script setup lang="ts">
const value = ref("John Doe")
</script>

<template>
  <MWithClear v-model="value" />
</template>

`leadingIcon` Leading Icon

Add a semantic icon to the input via leadingIcon:

leadingIcon

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

<template>
  <MWithClear v-model="value" leading-icon="i-lucide-mail" />
</template>

`size` Size

Switch input and clear button size via size:

size

<script setup lang="ts">
const value = ref("Content")
</script>

<template>
  <MWithClear v-model="value" size="md" />
</template>

`buttonProps` Clear Button

Customize the clear button style via buttonProps:

buttonProps.color

buttonProps.icon

<script setup lang="ts">
const value = ref('Some content')
</script>

<template>
  <MWithClear v-model="value" :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 keyword = ref('关键词')

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

<template>
  <MWithClear v-model="keyword" @clear="handleClear" />
</template>

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`buttonProps`		`ButtonProps`
`id`		`string`
`name`		`string`
`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 & {}`
`placeholder`		`string` 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"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`autocomplete`		`string & {} \| "on" \| "off"`
`autofocusDelay`		`number`
`defaultValue`		`T`
`modelModifiers`		`ModelModifiers`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailingIcon`		`any` Display an icon on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`list`		`string`
`max`		`string \| number`
`maxlength`		`string \| number`
`min`		`string \| number`
`minlength`		`string \| number`
`pattern`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`step`		`string \| number`
`modelValue`		`T`
`required`		`boolean`
`autofocus`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`ui`		`Record<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; }`

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

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; }; }

default { 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; }; }

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; }; }`
`default`	`{ 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: {
    withClear: {
      slots: {
        trailing: 'pe-1'
      }
    }
  }
})

Changelog

No recent changes

WithCharacterLimit

An input component with character limit and live counter display.

WithCopy

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