WithCharacterLimit

An input component with character limit and live counter display.

Introduction

MWithCharacterLimit is an input component with a character limit and real-time counter display. It shows the current character count and maximum limit to the right of the input field, helping users control input length.

Built on Nuxt UI's Input component

Usage

Default limit is 50 characters, with current/max count displayed in real time on the right:

23/50

<script setup lang="ts">
const value = ref("Type up to the limit...")
</script>

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

`maxLength` Character Limit

Set the maximum character count via maxLength:

maxLength

0/10

<template>
  <MWithCharacterLimit :max-length="10" />
</template>

`leadingIcon` Leading Icon

Add a semantic icon to the input via leadingIcon:

leadingIcon

0/50

<template>
  <MWithCharacterLimit leading-icon="i-lucide-message-square" />
</template>

`size` Size

Switch input and counter size via size:

size

0/50

<template>
  <MWithCharacterLimit size="md" />
</template>

`ui` Styles

Customize the counter style via ui.counter:

maxLength

ui.counter

0/100

<template>
  <MWithCharacterLimit :max-length="100" :ui="{ counter: 'text-success' }" />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`maxLength`	`50`	`number` 最大允许输入的字符数
`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; counter?: SlotClass; }`

Emits

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

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

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: {
    withCharacterLimit: {
      slots: {
        trailing: 'pointer-events-none',
        counter: 'text-xs text-muted tabular-nums'
      }
    }
  }
})

Changelog

No recent changes

Tree

A tree component built on Nuxt UI Tree, adding search, lazy loading, toolbar, checkboxes, and parent/child strategy.

WithClear

An input component with a clear button.