CwTextArea

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

Basic Usage

Helper text, counter, and full-width responsive behavior.

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

0/280

Live preview

Nothing entered yet.

Validation Demo

Combines browser validation attributes with custom client-side rules.

Required. Native validation checks required/minlength/maxlength, then custom rules can layer on top.

0/240

Code Samples

Basic CwTextArea Copy code 
<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
/>
Validation with CwTextArea Copy code 
<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>