Text Area · CropWatch UI

CwTextArea

Multi-line input with the same CWUI field treatment as CwInput, plus native-friendly validation hooks and responsive layout behavior.

Field notes

Use the theme picker in the header to verify both light and dark themes.

0/280

Live preview

Nothing entered yet.

Sizes & states

Small

Large

Read-only

Calibrated on install. Contact support to change.

Disabled

Code Samples

<CwTextArea
	label="Field notes"
	placeholder="Log observations, thresholds, or operator context…"
	bind:value={notes}
	hint="Use the theme picker in the header to verify light and dark mode."
	rows={5}
	maxlength={280}
	showCount
/>

<script lang="ts">
	import { CwTextArea } from '@cropwatchdevelopment/cwui';

	type ValidatableTextArea = {
		reportValidity: () => boolean;
		setCustomValidity: (message: string) => void;
	};

	let summary = $state('');
	let error = $state('');
	let valid = $state(false);
	let field = $state<ValidatableTextArea | null>(null);

	function handleInput() {
		error = '';
		valid = false;
		field?.setCustomValidity('');
	}

	function validate(event: SubmitEvent) {
		event.preventDefault();
		error = '';
		valid = false;
		field?.setCustomValidity('');

		if (!(field?.reportValidity() ?? true)) return;

		if (summary.trim().length < 20) {
			error = 'Add at least 20 characters so the next shift has enough context.';
			return;
		}

		valid = true;
	}
<\/script>

<form onsubmit={validate}>
	<CwTextArea
		bind:this={field}
		label="Shift handoff"
		name="handoff"
		required
		minlength={10}
		maxlength={240}
		bind:value={summary}
		error={error}
		valid={valid}
		oninput={handleInput}
		showCount
	/>
</form>

API

Usage and API reference

CwTextArea is the multi-line counterpart to CwInput and shares its label, hint, error and size styling. It can show a live character count against `maxlength`.

How to think about it

Label it and add a hint `label` renders above the field, and `hint` below it. When `error` is set it replaces the hint and marks the field invalid.
Show the count when there is a limit Combine `maxlength` with `showCount`. The counter updates visually without announcing every keystroke.
Choose a resize mode `resize` controls whether people can drag the field larger; `vertical` suits most forms.

Props and callbacks

API	Type	Details
`value` Default: `''`	`string`	Bindable text value.
`label`	`string`	Visible label above the field.
`hint`	`string`	Helper text under the field.
`error`	`string`	Error message. Sets `aria-invalid` and replaces the hint.
`valid` Default: `false`	`boolean`	Shows the success border.
`required` Default: `false`	`boolean`	Adds the required marker and `aria-required`.
`readonly / disabled` Default: `false`	`boolean`	Native read-only and disabled states.
`size` Default: `'md'`	`'sm' \| 'md' \| 'lg'`	Padding and font scale, matching CwInput.
`rows`	`number`	Initial visible rows.
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	Resize handle behaviour.
`showCount` Default: `false`	`boolean`	Shows a character count (with `maxlength`, shows the limit).
`oninput / onchange / onblur / onfocus`	`(event) => void`	Native event callbacks.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Notes field with a limit

<script lang="ts">
	import { CwTextArea } from '@cropwatchdevelopment/cwui';

	let notes = $state('');
</script>

<CwTextArea
	label="Field notes"
	hint="Visible to everyone in this location."
	bind:value={notes}
	maxlength={500}
	showCount
	rows={4}
	resize="vertical"
/>