TextArea

Usage

<script>
	import { TextArea } from 'bref-ui';
</script>

<label for="entry">Message</label>
<TextArea id="entry" name="entry" placeholder="Write a message" rows={3} />

Sizes and variants

Neutral and soft variants use quiet tonal fills, with a clear indicator when focused.

Playground

<script lang="ts">
	import { TextArea } from 'bref-ui';
	let value = $state('A longer message can be resized vertically.');
	let lastChange = $state('Edit the field to inspect onChange.');
	let nativeEvents = $state(0);
</script>

<label for="playground-text-area">Editable message</label>
<TextArea
	id="playground-text-area"
	size="medium"
	variant="soft"
	glass={false}
	wide={false}
	disabled={false}
	readonly={false}
	icon={{ name: 'edit', filled: false }}
	resizable={true}
	rows={3}
	bind:value
	onChange={(next) => (lastChange = 'TextArea: ' + next)}
	oninput={() => nativeEvents++}
/>
<p role="status">{lastChange}</p>
<p>Bound value: {value}; native input events: {nativeEvents}</p>

Native form behavior

Native labels, IDs, names, constraints, events, form association and ARIA attributes pass through to the textarea. Use bind:value for its string value. No content snippet is used. The optional leading icon is decorative. Native rows , cols , wrap , lengths and defaultValue are supported.

Submit the form to inspect its value.

Required fields use native validation on submission. Error styling follows native :user-invalid after interaction or submission; untouched required fields stay quiet. Use aria-invalid="true" for application errors.

This entry was not accepted. Check the value and try again.

Props