CharacterCount

A ring that fills as a limited field is typed in, the characters left once the limit is near.

View code

tsx

<form method="post" action="/posts">
	<textarea id="draft" name="text" aria-label="Post">{draft}</textarea>
	<CharacterCount
		for="draft"
		max={280}
		value={draft}
		holdSubmit
		labels={{ remaining: "{count} characters left", over: "{count} characters over the limit" }}
	/>
	<Button type="submit">Post</Button>
</form>

// Check the same count on the server, so the two never disagree:
if (countCharacters(text) > 280) return answerWithIssue();

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add character-count

Usage

typescript

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

Short field

View code

tsx

<input id="bio" name="bio" aria-label="Bio" />
<CharacterCount
	for="bio"
	max={60}
	warn={10}
	holdSubmit
	labels={{ remaining: "{count} characters left", over: "{count} characters over the limit" }}
/>
<Button type="submit">Save</Button>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.