# V input group 21

> Textarea with character countdown

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-input-group-21).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-input-group-21
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-input-group-21-light-b07c545ea4da9fb6.png
- Registry item: https://ui.cnippet.dev/r/v-input-group-21.json
- Categories: input group
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-input-group-21.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/input-group`

## Files

### `registry/default/variants/v-input-group-21.tsx`

```tsx
"use client";

import { useState } from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupTextarea,
} from "@/registry/default/ui/input-group";

const MAX = 280;

export default function Particle() {
  const [value, setValue] = useState("");
  const remaining = MAX - value.length;
  const isNear = remaining <= 20;
  const isOver = remaining < 0;

  return (
    <InputGroup className="w-full max-w-sm">
      <InputGroupTextarea
        aria-label="Post content"
        maxLength={MAX + 20}
        onChange={(e) => setValue(e.target.value)}
        placeholder="What's on your mind?"
        rows={3}
        value={value}
      />
      <InputGroupAddon align="block-end">
        <InputGroupText
          className={
            isOver
              ? "text-destructive-foreground"
              : isNear
                ? "text-warning"
                : "text-muted-foreground"
          }
        >
          {remaining}
        </InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}
```