# CharacterCount

> A ring that fills as a limited field is typed in, the characters left once the limit is near, and how far over once past it, for a post, a bio or a short reply.

```ts
import { CharacterCount } from "@sdxc/ui";
```

Renders the ring and its number. The ring sits in a fixed box and scales up for the
warning, so the controls beside it never move; past ten over, only the number remains.
The island loads from `@sdxc/ui/character-count`, which the browser entry maps.

## Examples

```tsx
<Textarea id="draft" name="text" />
<CharacterCount for="draft" max={280} holdSubmit
	labels={{ remaining: "{count} characters left", over: "{count} characters over" }} />
```

## Props

Takes no props of its own.