Files
ui/docs/app/components/content/examples/input/InputCharacterLimitExample.vue
Benjamin Canac d49e0dadee feat(module): define neutral utilities (#3629)
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
2025-04-21 15:20:53 +02:00

25 lines
503 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-muted tabular-nums"
aria-live="polite"
role="status"
>
{{ value?.length }}/{{ maxLength }}
</div>
</template>
</UInput>
</template>