Skip to main content
FlexTextareaField ← Back to Table of Contents

​
Summary

A highly capable alternative to Filament’s native Textarea. FlexTextareaField features smooth animated auto-sizing, character counters, integrated speech-to-text dictation, and an emoji picker. It also supports custom toolbar actions and selects.
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextareaField
State typestring|null
Model cast'bio' => 'string' · 'content' => 'text'
FieldTypeflex-textarea
Playgroundflex-textarea slug in Flex Fields playground
ExtendsFilament\Forms\Components\Textarea

​
Basic usage

​
Auto-sizing with counter

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextareaField;

FlexTextareaField::make('comment')
    ->label('Your Comment')
    ->characterCounter()
    ->maxLength(500);

​
Speech and Emoji support

FlexTextareaField::make('message')
    ->emojiPicker()
    ->speechDictation()
    ->footer('Pro tip: Use the microphone icon to dictate your message.');

​
State & validation

​
Stored value

The field stores a standard string. It inherits all validation rules from Filament’s Textarea. 
$record->comment; // "Hello world!"

​
Character Counter

When characterCounter() is enabled, a live counter appears in the footer. If maxLength() is set, it shows “X / Max”.

​
Toolbar & Actions

​
Toolbar Selects

Add pill-style dropdowns to the field header to quickly insert templates or change states. 
FlexTextareaField::make('response')
    ->toolbarSelect('template_id', [
        'welcome' => 'Welcome Message',
        'support' => 'Support Reply',
    ], icon: 'heroicon-o-document-text');

​
Submit Actions

Add a primary action button (like “Send”) directly into the textarea suffix. 
FlexTextareaField::make('chat_message')
    ->submitAction(
        Action::make('send')
            ->icon('heroicon-s-paper-airplane')
            ->action(fn ($state) => /* ... */)
    );

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
variant(string|Closure $variant)Setup'primary'primary, secondary, flat, soft
characterCounter(bool|Closure $cond)SetupfalseShow live character count
animatedAutosize(bool|Closure $cond)SetuptrueSmooth height transitions
maxHeight(string|Closure|null $h)Setup'24rem'Maximum auto-grow height
footer(string|Closure|null $text)SetupnullHelp text below the field
speechDictation(bool|Closure $cond)SetupfalseEnable browser speech-to-text
emojiPicker(bool|Closure $cond)SetupfalseEnable native emoji picker
toolbarSelect(...)Setup—Add dropdown to toolbar
submitAction(Action|Closure $act)Setup—Add primary suffix action
size(string|Closure $size)Setup'md'sm, md, lg
rounding(string|Closure $round)SetupconfigBorder radius token

​
Real-world examples

​
Modern Chat Input

FlexTextareaField::make('message')
    ->placeholder('Type a message...')
    ->rows(1)
    ->maxHeight('12rem')
    ->emojiPicker()
    ->speechDictation()
    ->submitAction(
        Action::make('send')
            ->icon('heroicon-s-paper-airplane')
            ->color('primary')
    )
    ->variant('soft')
    ->rounding('full');

​
Playground

/admin/flex-fields-playground/flex-textarea See Playground for setup.
ComponentWhen to use instead
RichEditorWhen HTML formatting (bold, links) is required
FlexTextInputSingle-line inputs
VoiceNoteRecorderRecording audio files instead of dictation

​
CSS classes (reference)

ClassRole
fff-flex-textarea-fieldRoot wrapper
fff-flex-textarea-field--{variant}Theme variant
fff-flex-textarea-field__inputThe actual textarea element
fff-flex-textarea-field__toolbarTop actions area
fff-flex-textarea-field__footerBottom info area
fff-flex-textarea-field__counterCharacter count text
fff-flex-textarea-field__speech-btnMicrophone button
fff-flex-textarea-field__emoji-btnEmoji button