Textarea

A multi-line text input component with reactive form integration, validation support, and optional auto-expand functionality for capturing longer text content from users.

Import

import {FktTextareaComponent} from "frakton-ng/textarea";

Basic usage

A basic textarea with label and placeholder. Use this as a starting point for most scenarios where free-form multi-line text input is needed.

Current value: (empty)


	

	
		Current value: {{ control().value() || '(empty)' }}

Validation

Textarea with validation logic for minimum and maximum length. Shows error messages and disables submission if the requirements are not met.

The field is required

Status: Invalid

Character count:0/500

Required minimum:20 characters


	
		
		
	

	
		
			Status:
			
						{{ control().valid() ? 'Valid' : 'Invalid' }}
					
		

		
			
				Character count:
				{{ characterCount() }}/{{ maxLength() }}
			

			
				Required minimum:
				{{ minLength() }} characters

Auto expand

Textarea with auto-expand enabled. The textarea grows vertically as the user types more lines, improving the writing experience for long texts.

Auto-expand is enabled

The textarea will automatically grow as you type.

Try typing multiple lines to see the auto-expand behavior.

Lines count: 2


	
		Auto-expand is {{ autoExpand() ? 'enabled' : 'disabled' }}
		The textarea will {{ autoExpand() ? 'automatically grow' : 'maintain fixed height' }} as you type.
	

	

	
		Try typing multiple lines to see the auto-expand behavior.
		Lines count: {{ lineCount() }}

Form integration

Demonstrates how the textarea integrates with signal forms. This is ideal for real-world forms that need validation, control and submission.

Contact Form


	Contact Form

	
		
			
				
				
			
			
				
				
			
			
				
				
			
			
				
				
			


			
				
						
							{{ form().valid() ? '✓ Form is valid' : 'Please fill all required fields' }}
						
				

				
					
					
					
					
				
			
		

	

	@if (submittedData()) {
		
			Form Submitted Successfully!
			{{ submittedData() | json }}
		
	}

Character counter

Textarea with a live character counter, ideal for use cases like social posts, tweets, or messages with a maximum allowed length.

Character count: 0 / 280

Words: 0

Lines: 1

Remaining: 280


	

	
		
		
			Character count:
			
				{{ characterCount() }} / {{ maxLength() }}
			
		

		
		
			
		

		
		
			
				Words: {{ wordCount() }}
			
			
				Lines: {{ lineCount() }}
			
			
				Remaining: {{ remainingCharacters() }}
			
		

		
		@if (characterCount() > warningThreshold()) {
			
				@if (characterCount() <= maxLength()) {
					⚠️ You're approaching the character limit
				}
				@if (characterCount() > maxLength()) {
					❌ Character limit exceeded by {{ characterCount() - maxLength() }}
						characters
				}
			
		}

Disabled state

Shows the textarea in a disabled state. Useful for read-only or preview scenarios, or when editing is not allowed due to permissions or workflow status.

Status: Disabled

Disabled textareas prevent user interaction while preserving the current value.

Common use cases include read-only views, locked fields, or conditional editing.


	

	
		
		

		
			Status: {{ control().disabled() ? 'Disabled' : 'Enabled' }}
		
	

	
		Disabled textareas prevent user interaction while preserving the current value.
		Common use cases include read-only views, locked fields, or conditional editing.