Built-in Field Types
Custom Fields includes 20+ pre-configured field types:Field Type | Key | Data Type | Description |
---|---|---|---|
Text Input | text | String | Basic text input with validation |
email | String | Email input with validation | |
Phone | phone | String | Phone number input |
Link | link | String | URL validation and formatting |
Textarea | textarea | Text | Multi-line text input |
Rich Editor | rich-editor | Text | WYSIWYG editor with formatting |
Markdown Editor | markdown-editor | Text | Markdown syntax with preview |
Number | number | Numeric | Numeric input with min/max validation |
Currency | currency | Float | Currency formatting with locale support |
Tags Input | tags-input | Multi-choice | Multiple tags with autocomplete |
Select | select | Single-choice | Single selection dropdown |
Multi-Select | multi-select | Multi-choice | Multiple selections |
Radio | radio | Single-choice | Single choice radio buttons |
Checkbox | checkbox | Boolean | Simple true/false toggle |
Checkbox List | checkbox-list | Multi-choice | Multiple checkboxes |
Toggle | toggle | Boolean | Switch-style toggle |
Toggle Buttons | toggle-buttons | Single-choice | Button group selection |
Date | date | Date | Date picker |
Date Time | datetime | DateTime | Date and time picker |
Color Picker | color-picker | String | Visual color selection |
File Upload | file-upload | String | File upload with validation |
Creating Custom Field Types
You have flexible options for extending Custom Fields:- Create entirely new field types for specialized functionality
- Extend existing built-in field types to add custom behavior
- Replace built-in field types by creating custom ones with the same key
Generate a Field Type
Use the Artisan command to create a new field type:app/Filament/FieldTypes/
.
Field Type Structure
Custom field types extendBaseFieldType
and use the FieldSchema
system:
Register Your Field Type
Register your custom field type in your Filament Panel Provider:Extending and Replacing Field Types
You have additional flexibility with custom field types:- Replace built-in field types: Create a custom field type with the same key as a built-in type (e.g.,
file-upload
) to completely override it with your own implementation and behavior
FieldSchema API
TheFieldSchema
class provides a fluent API for configuring field types. Choose the appropriate factory method based on your field’s data type:
Data Type Factory Methods
Configuration Methods
Component Types
You can define components in two ways:1. Class References (Simple)
For basic components, reference Filament classes directly:2. Closures (Flexible)
For customized components, use closures that return configured components:Choice Fields and Options
Choice fields (select, radio, checkboxes) can handle options in different ways:User-Defined Options (Default)
Users define their own options when creating fields:Built-in Options
Field type provides predefined options:Arbitrary Values
Accept both predefined and new user-typed values:Data Types
Custom Fields supports these data types for storage optimization and validation compatibility:Best Practices
- Use Existing Filament Components: Build on Filament’s components like
Select
,TextInput
, etc. - Follow Naming Conventions: Use kebab-case for keys (e.g.,
star-rating
,country-select
) - Choose the Right Data Type: Select the data type that matches how your field’s values should be stored
- Use Closures for Flexibility: For complex components, use closure-based definitions
- Test Your Components: Ensure your field type works in forms, tables, and infolists
- Consider Validation: Only allow validation rules that make sense for your field type
Field Type Priority
Field types are ordered by priority (lower numbers appear first):- 10-20: Common text fields
- 30-40: Selection fields
- 50-60: Specialized fields
- 70+: Advanced fields
Troubleshooting
Field Type Not Appearing
If your custom field type doesn’t appear in the dropdown:- Ensure your field type class extends
BaseFieldType
- Verify the field type is registered in your panel provider
- Clear Laravel’s cache:
php artisan cache:clear
- Check that the
configure()
method returns a validFieldSchema
Components Not Rendering
If your components don’t render correctly:- Verify you’re using
$customField->getFieldName()
for field names - For closure-based components, ensure closures return valid Filament components
- Test with simple components first before adding complexity
- Check that you’re importing all necessary Filament component classes