TextareaInput

A Material Design 3 styled multi-line text input with character counting, auto-resizing, and voice input support in smrt mode for longer text content.

Installation

typescript

import { TextareaInput } from '@happyvertical/smrt-svelte';

Basic Usage

A simple textarea with 4 rows by default.

Biography

svelte

<script lang="ts">
  let value = $state('');
</script>

<TextareaInput
  name="bio"
  label="Biography"
  placeholder="Tell us about yourself..."
  bind:value
/>

With Default Value

Pre-populate the textarea with existing text.

Description

svelte

<TextareaInput
  name="description"
  label="Description"
  value="Software developer passionate about building elegant solutions."
/>

Custom Height

Adjust the number of visible rows with the rows prop.

Comments

svelte

<TextareaInput
  name="comments"
  label="Comments"
  rows={8}
  placeholder="Enter your detailed feedback..."
/>

Required Field

Add required to mark the field as required.

Feedback*

svelte

<TextareaInput
  name="feedback"
  label="Feedback"
  placeholder="Please share your thoughts..."
  required
/>

Disabled State

Use disabled to prevent user interaction.

Approved Content

svelte

<TextareaInput
  name="readonly"
  label="Approved Content"
  value="This content has been approved and cannot be edited."
  disabled
/>

With Description

Add a description for additional context.

Additional Notes

svelte

<TextareaInput
  name="notes"
  label="Additional Notes"
  description="Any other information you'd like to share"
  placeholder="Optional notes..."
/>

Voice Input (smrt Mode)

In smrt mode, users can dictate longer text content. The component supports:

Continuous dictation for paragraphs
Natural punctuation commands ("period", "comma", "question mark")
Line break commands ("new line", "new paragraph")
Automatic capitalization after punctuation

svelte

<!-- Voice example: continuous dictation with natural punctuation -->
<TextareaInput
  name="voice"
  label="Article Content"
  description="The main body text of your article"
  rows={10}
/>

Interactive Example

Type to see value updates in real-time:

Your Message

Length: 0 characters

svelte

<script lang="ts">
  let value = $state('');
</script>

<TextareaInput
  name="interactive"
  label="Your Message"
  placeholder="Start typing..."
  bind:value
/>
<p>Length: {value.length} characters</p>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Field label displayed above the textarea
`description`	`string`	`undefined`	Description text for voice extraction context
`placeholder`	`string`	`''`	Placeholder text shown when empty
`value`	`string`	`''`	Current text value (bindable)
`rows`	`number`	`4`	Number of visible text rows
`disabled`	`boolean`	`false`	Disables the textarea
`required`	`boolean`	`false`	Marks field as required
`appendMode`	`boolean`	`false`	When true, voice input appends to existing text instead of replacing
`onchange`	`(value: string) => void`	`undefined`	Callback when value changes

TypeScript

typescript

import { TextareaInput } from '@happyvertical/smrt-svelte';

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  placeholder?: string;
  value?: string;
  rows?: number;
  disabled?: boolean;
  required?: boolean;
  appendMode?: boolean;
  onchange?: (value: string) => void;
}

Accessibility

TextareaInput follows WCAG 2.1 AA guidelines:

Proper ARIA labels for screen readers
Keyboard navigation support (Tab, Shift+Tab)
Character count announced to screen readers
Error messages properly associated with input
Focus indicators meet contrast requirements