# Advanced Text Area

## Example

```svelte
<script lang="ts">
	import { Box, Button, toast } from '@foxui/all';
	import { AdvancedTextArea } from '@foxui/all';

	let content = $state('');

	function handleSubmit(e: Event) {
		if (!content) {
			toast.error('Please enter a post');
			return;
		}
		content = '';

		e.preventDefault();
		toast.success('Post submitted');
	}
</script>

<form class="not-prose" onsubmit={handleSubmit}>
	<AdvancedTextArea bind:value={content}>
		{#snippet actionButtons()}
			<Button
				variant="ghost"
				size="icon"
				onclick={() => {
					toast('Sorry, I was too lazy to actually add this feature to this demo');
				}}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
					/>
				</svg>
			</Button>
			<Button
				variant="ghost"
				size="icon"
				onclick={() => {
					toast('Sorry, I was too lazy to actually add this feature to this demo');
				}}
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					class="size-6"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
					/>
				</svg>
			</Button>
		{/snippet}
	</AdvancedTextArea>
</form>
```

## Documentation

## Usage

```svelte
<script lang="ts">
	import { AdvancedTextArea } from '@foxui/text';

	let content = $state('');

	const handleSubmit = (e: Event) => {
		e.preventDefault();
		console.log(content);
	};
</script>

<form onsubmit={handleSubmit}>
	<AdvancedTextArea bind:value={content} placeholder="Write something..." />
</form>

```

## API Reference

### AdvancedTextArea
A textarea with optional additional content area and action buttons, suitable for composing posts or messages.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | `string` | `-` | The current text value. (bindable) |
| placeholder | `string` | `'Write something here...'` | Placeholder text. |
| rows | `number` | `3` | The number of visible text rows. |
| additionalContent | `Snippet` | `-` | Additional content to display below the textarea (e.g. media previews). |
| actionButtons | `Snippet` | `-` | Action buttons displayed in the bottom-left area (e.g. attach, emoji). |
| submitButton | `Snippet | string | null` | `'Post'` | The submit button. Can be a string label, a custom snippet, or null to hide. |