Form Fields - Filament

Introduction

Filament provides a comprehensive set of form fields for capturing different types of data. All form field classes are found in the Filament\Forms\Components namespace.

Text Input

The text input allows you to interact with string values:

use Filament\Forms\Components\TextInput;

TextInput::make('name')
    ->required()
    ->maxLength(255)

Input types

You can set the HTML input type using dedicated methods:

TextInput::make('email')
    ->email()
    ->required()

TextInput::make('website')
    ->url()
    ->prefix('https://')

TextInput::make('phone')
    ->tel()
    ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/')

TextInput::make('password')
    ->password()
    ->revealable()
    ->required()

TextInput::make('price')
    ->numeric()
    ->step(0.01)
    ->prefix('$')

TextInput::make('quantity')
    ->integer()
    ->minValue(1)
    ->maxValue(100)

Affixes

You can add prefixes and suffixes to text inputs:

TextInput::make('domain')
    ->prefix('https://')
    ->suffix('.com')

TextInput::make('price')
    ->numeric()
    ->prefix('$')
    ->suffix('USD')

Input masks

Apply input masks for formatted input:

TextInput::make('phone')
    ->mask('(999) 999-9999')

TextInput::make('credit_card')
    ->mask('9999 9999 9999 9999')

Select

The select component allows selection from predefined options:

use Filament\Forms\Components\Select;

Select::make('status')
    ->options([
        'draft' => 'Draft',
        'reviewing' => 'Reviewing',
        'published' => 'Published',
    ])
    ->required()

Searchable selects

Enable search for easier option access:

Select::make('author_id')
    ->label('Author')
    ->options(User::pluck('name', 'id'))
    ->searchable()

Multi-select

Allow multiple selections:

Select::make('categories')
    ->multiple()
    ->options(Category::pluck('name', 'id'))
    ->searchable()

Native vs JavaScript select

By default, Filament uses native HTML selects. Enable a JavaScript-powered select:

Select::make('status')
    ->options([...])
    ->native(false)

Relationship selects

Populate options from Eloquent relationships:

Select::make('author_id')
    ->relationship('author', 'name')
    ->searchable()
    ->preload()

Checkbox

A single checkbox for boolean values:

use Filament\Forms\Components\Checkbox;

Checkbox::make('is_active')
    ->label('Active')
    ->inline(false)

Toggle

A modern toggle switch for boolean values:

use Filament\Forms\Components\Toggle;

Toggle::make('is_featured')
    ->label('Featured')
    ->onIcon('heroicon-m-star')
    ->offIcon('heroicon-m-star')
    ->onColor('warning')

Radio

Radio buttons for single selection from options:

use Filament\Forms\Components\Radio;

Radio::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->descriptions([
        'draft' => 'Not visible to the public.',
        'scheduled' => 'Will be published at the scheduled time.',
        'published' => 'Visible to the public.',
    ])

Checkbox List

Multiple checkboxes for array selection:

use Filament\Forms\Components\CheckboxList;

CheckboxList::make('technologies')
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Livewire',
    ])
    ->columns(2)
    ->searchable()

Date & Time Pickers

Date, time, and datetime selection:

use Filament\Forms\Components\DatePicker;

DatePicker::make('date_of_birth')
    ->native(false)
    ->displayFormat('d/m/Y')
    ->minDate(now()->subYears(100))
    ->maxDate(now())

use Filament\Forms\Components\TimePicker;

TimePicker::make('start_time')
    ->native(false)
    ->seconds(false)

use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->native(false)
    ->timezone('America/New_York')
    ->minDate(now())

File Upload

File and image upload with preview:

use Filament\Forms\Components\FileUpload;

FileUpload::make('avatar')
    ->image()
    ->imageEditor()
    ->imageEditorAspectRatios([
        '16:9',
        '4:3',
        '1:1',
    ])
    ->maxSize(1024)

Multiple file uploads

FileUpload::make('attachments')
    ->multiple()
    ->maxFiles(5)
    ->acceptedFileTypes(['application/pdf', 'image/*'])

Image uploads

FileUpload::make('cover_image')
    ->image()
    ->imagePreviewHeight('250')
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('16:9')
    ->imageResizeTargetWidth('1920')
    ->imageResizeTargetHeight('1080')

Rich Editor

WYSIWYG editor with formatting tools:

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        'blockquote',
        'bold',
        'bulletList',
        'codeBlock',
        'h2',
        'h3',
        'italic',
        'link',
        'orderedList',
        'redo',
        'strike',
        'underline',
        'undo',
    ])
    ->fileAttachments()
    ->required()

Markdown Editor

Markdown editor with preview:

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('readme')
    ->toolbarButtons([
        'bold',
        'bulletList',
        'edit',
        'italic',
        'link',
        'preview',
        'strike',
    ])

Textarea

Multi-line text input:

use Filament\Forms\Components\Textarea;

Textarea::make('description')
    ->rows(5)
    ->cols(20)
    ->autosize()
    ->maxLength(1000)

Tags Input

Input for managing tags or keywords:

use Filament\Forms\Components\TagsInput;

TagsInput::make('keywords')
    ->separator(',')
    ->suggestions([
        'tailwindcss',
        'alpinejs',
        'laravel',
        'livewire',
    ])

Repeater

Repeatable set of fields for array data:

use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;

Repeater::make('team_members')
    ->schema([
        TextInput::make('name')
            ->required(),
        Select::make('role')
            ->options([
                'developer' => 'Developer',
                'designer' => 'Designer',
                'manager' => 'Manager',
            ])
            ->required(),
    ])
    ->columns(2)
    ->defaultItems(1)
    ->addActionLabel('Add team member')
    ->collapsible()

Repeater with relationships

Repeater::make('qualifications')
    ->relationship()
    ->schema([
        TextInput::make('title')->required(),
        DatePicker::make('issued_at')->required(),
    ])

Builder

Flexible builder with multiple block types:

use Filament\Forms\Components\Builder;
use Filament\Forms\Components\Builder\Block;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\FileUpload;

Builder::make('content')
    ->blocks([
        Block::make('heading')
            ->schema([
                TextInput::make('content')
                    ->label('Heading')
                    ->required(),
                Select::make('level')
                    ->options([
                        'h1' => 'Heading 1',
                        'h2' => 'Heading 2',
                        'h3' => 'Heading 3',
                    ])
                    ->required(),
            ]),
        Block::make('paragraph')
            ->schema([
                Textarea::make('content')
                    ->label('Paragraph')
                    ->required(),
            ]),
        Block::make('image')
            ->schema([
                FileUpload::make('url')
                    ->label('Image')
                    ->image()
                    ->required(),
                TextInput::make('alt')
                    ->label('Alt text')
                    ->required(),
            ]),
    ])
    ->collapsible()

Key-Value

Key-value pair editor:

use Filament\Forms\Components\KeyValue;

KeyValue::make('metadata')
    ->keyLabel('Property name')
    ->valueLabel('Property value')
    ->addActionLabel('Add property')
    ->reorderable()

Color Picker

Color selection input:

use Filament\Forms\Components\ColorPicker;

ColorPicker::make('color')
    ->rgba()

Toggle Buttons

Button group for single or multiple selection:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->icons([
        'draft' => 'heroicon-o-pencil',
        'scheduled' => 'heroicon-o-clock',
        'published' => 'heroicon-o-check-circle',
    ])
    ->colors([
        'draft' => 'gray',
        'scheduled' => 'warning',
        'published' => 'success',
    ])
    ->inline()

Multiple selection

ToggleButtons::make('technologies')
    ->multiple()
    ->options([
        'laravel' => 'Laravel',
        'livewire' => 'Livewire',
        'alpine' => 'Alpine.js',
    ])
    ->grouped()

Slider

Range slider for numeric input:

use Filament\Forms\Components\Slider;

Slider::make('volume')
    ->minValue(0)
    ->maxValue(100)
    ->step(5)
    ->marks([
        0 => '0%',
        50 => '50%',
        100 => '100%',
    ])

Code Editor

Code editor with syntax highlighting:

use Filament\Forms\Components\CodeEditor;

CodeEditor::make('source_code')
    ->language('php')
    ->lineNumbers()

Hidden

Hidden field for storing data:

use Filament\Forms\Components\Hidden;

Hidden::make('user_id')
    ->default(auth()->id())

View Field

Render a custom Blade view as a field:

use Filament\Forms\Components\ViewField;

ViewField::make('custom_content')
    ->view('forms.components.custom-field')

Placeholder

Display read-only content:

use Filament\Forms\Components\Placeholder;

Placeholder::make('created_at')
    ->content(fn ($record): string => $record?->created_at?->diffForHumans() ?? '-')

Next steps

Form Layouts - Organize fields with sections, grids, and tabs
Validation - Add validation rules to fields
Advanced Features - Reactive and dependent fields

​Introduction

​Text Input

​Input types

​Affixes

​Input masks

​Select

​Searchable selects

​Multi-select

​Native vs JavaScript select

​Relationship selects

​Checkbox

​Toggle

​Radio

​Checkbox List

​Date & Time Pickers

​File Upload

​Multiple file uploads

​Image uploads

​Rich Editor

​Markdown Editor

​Textarea

​Tags Input

​Repeater

​Repeater with relationships

​Builder

​Key-Value

​Color Picker

​Toggle Buttons

​Multiple selection

​Slider

​Code Editor

​Hidden

​View Field

​Placeholder

​Next steps