Files
ui/docs/app/components/content/examples/input/InputCharacterLimitExample.vue
2024-10-18 15:42:27 +02:00

25 lines
520 B
Vue

<script setup lang="ts">
const value = ref('')
const maxLength = 15
</script>
<template>
<UInput
v-model="value"
:maxlength="maxLength"
aria-describedby="character-count"
:ui="{ trailing: 'pointer-events-none' }"
>
<template #trailing>
<div
id="character-count"
class="text-xs text-[var(--ui-text-muted)] tabular-nums"
aria-live="polite"
role="status"
>
{{ value?.length }}/{{ maxLength }}
</div>
</template>
</UInput>
</template>