Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Label with Counter Input Group for Vue

A title field with Title and a fixed 0/60 in the header, and typing stops at 60 characters.

UI library: Ark UI

The header holds the Title label and, at the end, the text 0/60. The count does not change as someone types. The input stops at 60 characters. Clicking Title focuses the field.

Use it for a headline with the cap shown next to the name. If the count should sit under a long note, use a Textarea. In Vue, Ark UI does not update 0/60 while someone types.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupInput
    id="input-group-counter-title"
    :maxLength="60"
    placeholder="Enter title"
    type="text"
  />
  <InputGroupAddon align="block-start">
    <Label class="text-foreground" htmlFor="input-group-counter-title">Title</Label>
    <InputGroupText class="ms-auto">0/60</InputGroupText>
  </InputGroupAddon>
</InputGroup>

FAQ

How do the label and the count share the header?

Both sit in one block-start InputGroupAddon; ms-auto on the count pushes it to the end.

What stops typing at 60 characters?

maxLength={60} on InputGroupInput.

Does 0/60 update?

No, it's fixed text. Keep the value in state and render its length there.

How is the label tied to the input?

htmlFor on Label matches the input's id.

How do I make screen readers hear the count?

Give the count an id and point the input's aria-describedby at it.

Why is the count lighter than the label?

Addon text is muted; the label gets text-foreground, the count keeps the muted color.

API Reference

Input Group

Sets id="input-group-counter-title", maxLength="60", placeholder="Enter title", type="text" and align="block-start". The rest is on the Input Group page.

Label

Sets htmlFor="input-group-counter-title". The rest is on the Label page.

All 39 input group examples