## Character Limit Field (S—087)

A textarea with a small ring that fills toward the limit, switching to a countdown near the end and flagging overflow.

- URL: https://sundaeui.dev/components/char-limit-field
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/char-limit-field.json`
- Tags: bio, post, compose, limit, textarea, character-count

The ring stays quiet until you get close; inside the last twenty characters it shows the number left, and past the limit the ring turns dashed, the count goes negative and Post disables.
The field grows with its content up to a max height.

### Usage

```tsx
import { CharLimitField } from '@/components/sundae/char-limit-field'

<CharLimitField />
```

### Props

- `limit` (`number`, default `280`): Max characters.
- `value / defaultValue` (`string`): Text.
- `onValueChange` (`(v: string) => void`): Called on input.
- `placeholder` (`string`): Placeholder.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Bios, posts, SMS, meta descriptions.

### When not to use

- Long-form text without a limit.

### Accessibility

- The remaining count is linked with aria-describedby and announced only near the limit.
- aria-invalid is set when over the limit.
- Reduced motion removes the movement and keeps every state change.