Skip to main content
Nidhugg components dragon logo

Nidhugg Components

Character counter

Wrap around a textarea or input to add a character counter below it.

Live example

How to use

Install the package or use the CDN, then add the files to the head of your HTML file.

Wrap the <nidhugg-char-count> tag around a textarea or input.

You can also add a maxlength attribute to the tag to set the maximum number of characters allowed. <nidhugg-char-count maxlength="50">

Example


<nidhugg-char-count maxlength="50">
	<textarea>Lorem ipsum dolor sit amet...</textarea>
	</nidhugg-character-count>

Installation

The package can be found here: https://jsr.io/@nidhugg/web-components, and the code is hosted here: https://github.com/fredrikbergqvist/nidhu.gg

npm:

npx jsr add @nidhugg/web-components

Yarn:

yarn dlx jsr add @nidhugg/web-components

CDN:

Styling

The counter element has a class that can be targeted nidhugg-character-counter

.nidhugg-character-counter {
	/** Custom styles **/
}