CharacterCount | tcpsystems/ui

Try it

21 of 40

Svelte

<CharacterCount value="Ready for production." max={40} id="playground-deployment-note-count" />

Examples

Deployment note

Deployment note 21 of 40

Deployment note.svelte

<script lang="ts">
	import CharacterCount from '@tcpsystems/ui/foundation/CharacterCount';
	import Textarea from '@tcpsystems/ui/foundation/Textarea';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let value = $state('Ready for production.');
</script>

<Stack>
	<label for={uid}>Deployment note</label>
	<Textarea id={uid} rows={2} bind:value describedby={`${uid}-count`} invalid={value.length > 40 ? 'true' : undefined} />
	<CharacterCount id={`${uid}-count`} {value} max={40} />
</Stack>

Near limit

Deployment note 39 of 40

Near limit.svelte

<script lang="ts">
	import CharacterCount from '@tcpsystems/ui/foundation/CharacterCount';
	import Textarea from '@tcpsystems/ui/foundation/Textarea';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let value = $state('Production rollout starts at 18:00 UTC.');
</script>

<Stack>
	<label for={uid}>Deployment note</label>
	<Textarea id={uid} rows={2} bind:value describedby={`${uid}-count`} invalid={value.length > 40 ? 'true' : undefined} />
	<CharacterCount id={`${uid}-count`} {value} max={40} />
</Stack>

Over limit

Deployment note 65 of 40

Over limit.svelte

<script lang="ts">
	import CharacterCount from '@tcpsystems/ui/foundation/CharacterCount';
	import Textarea from '@tcpsystems/ui/foundation/Textarea';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let value = $state('Production rollout starts at 18:00 UTC after the backup finishes.');
</script>

<Stack>
	<label for={uid}>Deployment note</label>
	<Textarea id={uid} rows={2} bind:value describedby={`${uid}-count`} invalid={value.length > 40 ? 'true' : undefined} />
	<CharacterCount id={`${uid}-count`} {value} max={40} />
</Stack>

API

Import

import CharacterCount from '@tcpsystems/ui/foundation/CharacterCount';

Prop	Type	Default
`value`	`string`	none
`max`	`number`	none
`id`	`string`	none

Hook	Kind
`.tcp-char-count`	Root class
`data-state`	Data attribute