Filament Flex Fields

https://github.com/janczakb/filament-flex-fields
Admin
Filament Flex Fields is a Filament v5 plugin for Laravel admin panels, offering 68 custom form...
Tokens:121,836
Snippets:1,551
Trust Score:7.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Real-world implementation examples

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/choicecheckboxcards.md

Examples showing selection limits and media-layout configurations.

```php
ChoiceCheckboxCards::make('toppings')
    ->label('Select up to 3 toppings')
    ->options([
        'cheese' => 'Extra Cheese',
        'pepperoni' => 'Pepperoni',
        'mushrooms' => 'Mushrooms',
        'olives' => 'Olives',
    ])
    ->minSelections(1)
    ->maxSelections(3);
```

```php
ChoiceCheckboxCards::make('integrations')
    ->layout('media')
    ->gridColumns(3)
    ->indicator('none')
    ->options([
        'github' => ['label' => 'GitHub', 'icon' => 'gravityui-github'],
        'slack' => ['label' => 'Slack', 'icon' => 'gravityui-slack'],
        'linear' => ['label' => 'Linear', 'icon' => 'gravityui-linear'],
    ]);
```

--------------------------------

### Basic usage examples

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/currencyfield.md

Examples for configuring a fixed currency field and a multi-currency field with a picker.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\CurrencyField;

CurrencyField::make('price')
    ->label('Amount')
    ->currency('PLN')
    ->locale('pl_PL')
    ->required();
```

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\CurrencyField;

CurrencyField::make('budget')
    ->currencies(['EUR', 'USD', 'GBP', 'PLN'])
    ->currency('EUR')
    ->min(0)
    ->max(99999.99);
```

--------------------------------

### Example .env configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Environment variables for configuring link preview behavior.

```env
FLEX_FIELDS_LINK_PREVIEW_CACHE_TTL=43200
FLEX_FIELDS_LINK_PREVIEW_RATE_LIMIT=30
FLEX_FIELDS_LINK_PREVIEW_TIMEOUT=10
```

--------------------------------

### Real-world implementation examples

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/currencyfield.md

Usage examples within a Filament resource form and a donation form.

```php
public static function form(Form $form): Form
{
    return $form->schema([
        CurrencyField::make('price')
            ->currency('USD')
            ->locale('en_US')
            ->min(0.01)
            ->required(),
    ]);
}
```

```php
CurrencyField::make('donation_amount')
    ->currencies(['USD', 'EUR', 'GBP'])
    ->currency('USD')
    ->variant('flat')
    ->size('lg');
```

--------------------------------

### Install Filament Flex Fields

Source: https://github.com/janczakb/filament-flex-fields/blob/main/README.md

Run these commands to install the package and sync the necessary assets.

```bash
composer require janczakb/filament-flex-fields
php artisan filament:assets
```

--------------------------------

### State Format Examples

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/barcode-scanner-field.md

Examples of the plain string format stored by the field.

```php
// Valid EAN-13 example
'5901234123457'

// QR / Code128 example
'SKU-WAREHOUSE-42'
```

--------------------------------

### Install Spatie Laravel Translatable

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Install the required package via Composer.

```bash
composer require spatie/laravel-translatable
```

--------------------------------

### JSON/Array Storage Setup

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/translatablefields.md

Minimum configuration for JSON/array storage without external dependencies.

```php
// migration
$table->json('title');
$table->json('body')->nullable();
```

```php
class Post extends Model
{
    protected $fillable = ['title', 'body'];

    protected function casts(): array
    {
        return [
            'title' => 'array',
            'body' => 'array',
        ];
    }
}
```

```php
TranslatableFields::make('Content')
    ->locales(['pl' => 'PL', 'en' => 'EN'])
    ->schema([
        FlexTextInput::make('title')->hiddenLabel(),
        FlexTextareaField::make('body')->hiddenLabel(),
    ]);
```

--------------------------------

### Create a plan selection card

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexradiolist.md

A comprehensive example combining labels, descriptions, icons, and sizing.

```php
FlexRadiolist::make('subscription')
    ->label('Choose your plan')
    ->options([
        'monthly' => 'Monthly Billing',
        'yearly' => 'Yearly Billing (Save 20%)',
    ])
    ->descriptions([
        'monthly' => 'Billed every 30 days.',
        'yearly' => 'One annual payment.',
    ])
    ->icons([
        'monthly' => 'heroicon-o-calendar',
        'yearly' => 'heroicon-o-sparkles',
    ])
    ->size('lg')
    ->required();
```

--------------------------------

### Implement guest selection

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/numberstepper.md

Example of a large, primary-variant stepper suitable for wizard-style interfaces.

```php
NumberStepper::make('guests')
    ->label('Guests')
    ->helperText('Maximum 10 guests per reservation')
    ->minValue(1)
    ->maxValue(10)
    ->variant('primary')
    ->size('lg');
```

--------------------------------

### Basic usage of PhoneField

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/phonefield.md

Examples showing standard initialization and configuration of the PhoneField component.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\PhoneField;

PhoneField::make('phone')
    ->label('Mobile number')
    ->defaultCountry('PL')
    ->required();

PhoneField::make('contact_phone')
    ->countries(['PL', 'DE', 'GB', 'US'])
    ->mobileOnly()
    ->browserLocaleDefault()
    ->browserLocaleSortFirst();
```

--------------------------------

### Implement Full Form Example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Demonstrates usage of multiple date and time components within a Filament section.

```php
use Filament\Schemas\Components\Section;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateField;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDatePicker;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateRangeField;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateTimePicker;
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTimeField;
use Bjanczak\FilamentFlexFields\Enums\DateTimeGranularity;

Section::make('Schedule')
    ->schema([
        FlexDateField::make('date')
            ->required()
            ->withRecommendedDefaults(),

        FlexDatePicker::make('date_with_calendar')
            ->withRecommendedDefaults(),

        FlexTimeField::make('time')
            ->hourCycle(24)
            ->withRecommendedDefaults(),

        FlexDateTimePicker::make('date_time')
            ->granularity(DateTimeGranularity::Minute)
            ->withRecommendedDefaults(),

        FlexDateRangeField::make('range')
            ->withRecommendedDefaults(),
    ]);
```

--------------------------------

### Build Assets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/barcode-scanner-field.md

Commands to install dependencies and compile assets for the package.

```bash
cd packages/filament-flex-fields
npm install
npm run build
```

--------------------------------

### Configuring Preview Layouts

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Examples of setting different preview card layouts using the previewLayout method.

```php
LinkPreviewField::make('share_url_horizontal')
    ->label('Share URL')
    ->previewLayout('horizontal');

LinkPreviewField::make('share_url_vertical')
    ->label('Share URL')
    ->previewLayout('vertical');

LinkPreviewField::make('share_url_card')
    ->label('Share URL')
    ->previewLayout('card')
    ->columnSpanFull();
```

--------------------------------

### Model and database implementation

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Example of migration, model fillable property, and factory usage for the field.

```php
// Migration
$table->string('article_url')->nullable();

// Model — no special cast required
protected $fillable = ['article_url'];

// Factory / seeder
'article_url' => 'https://laravel.com',
```

--------------------------------

### Configure start suffix

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Set the starting point for slug suffixes when collisions occur.

```php
SlugOptions::create()
    ->generateSlugsFrom('title')
    ->saveSlugsTo('slug')
    ->startSlugSuffixFrom(5);
```

--------------------------------

### Date of Birth Bounds Example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Example usage for setting date of birth constraints.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDatePicker;

FlexDatePicker::make('birth_date')
    ->minDate(now()->subYears(150))
    ->maxDate(now())
    ->required();
```

--------------------------------

### Account verification screen example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexverificationcode.md

Implements a full account verification UI with heading, description, and footer actions.

```php
FlexVerificationCode::make('otp')
    ->hiddenLabel()
    ->heading('Verify your account')
    ->description("We've sent a 6-digit code to your email.")
    ->footer("Didn't receive it?")
    ->footerAction(fn () => /* resend logic */)
    ->length(6)
    ->autoSubmit();
```

--------------------------------

### Dashboard completion rate example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/progresscircle.md

Real-world example using a dynamic value and a large size for a dashboard widget.

```php
ProgressCircle::make()
    ->value(fn () => $this->getCompletionRate())
    ->variant('semicircle')
    ->gapAngle(30)
    ->size('lg')
    ->color('success')
    ->label('Profile completion')
    ->shell();
```

--------------------------------

### User Permissions Management example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/duallistboxfield.md

A practical implementation using database-driven options for managing system permissions.

```php
DualListboxField::make('permissions')
    ->label('System Permissions')
    ->options(Permission::pluck('name', 'id'))
    ->searchable()
    ->availableLabel('Available')
    ->selectedLabel('Granted')
    ->listHeight('30rem')
    ->required();
```

--------------------------------

### CMS Navigation Icon Example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/icon-picker-field.md

A practical example for a navigation icon field using only icons and a specific grid layout.

```php
IconPickerField::make('icon')
    ->label('Navigation Icon')
    ->sets(['heroicons'])
    ->iconsOnly()
    ->gridColumns(10)
    ->preload();
```

--------------------------------

### Implement a navigation table column

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/iconcolumn.md

Example configuration for a navigation-related icon column with primary coloring.

```php
IconColumn::make('icon')
    ->iconSize('md')
    ->iconColor('primary')
    ->showLabel();
```

--------------------------------

### Example rendered HTML output

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

Sample output showing responsive image attributes and YouTube video embedding.

```html
<img
  src="https://cdn.example.test/articles/1/photo__large.webp"
  srcset="https://cdn.example.test/.../photo__thumb.webp 320w, https://.../photo__large.webp 2000w"
  sizes="100vw"
  width="2000"
  loading="lazy"
  decoding="async"
  alt="Sunset over the marina"
/>

<div data-youtube-video="">
  <iframe src="https://www.youtube-nocookie.com/embed/..." class="fff-rich-editor__youtube-iframe"></iframe>
</div>
```

--------------------------------

### Filament Resource quick start

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Basic implementation within a Filament resource form schema.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\TitleSlugField;

public static function form(Schema $schema): Schema
{
    return $schema->components([
        TitleSlugField::make(
            urlHost: config('app.url'),  // opcjonalne — permalink w UI
            urlPath: '/blog/',           // optional — path prefix
        ),
        // ...other fields
    ]);
}
```

--------------------------------

### Spatie Laravel Sluggable Installation

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Optional installation command for projects requiring Spatie integration for slug generation.

```bash
composer require spatie/laravel-sluggable
```

--------------------------------

### Publish assets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/calculator-field.md

Command to publish required assets after installation or upgrades.

```bash
php artisan filament:assets
```

--------------------------------

### State format examples

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/social-links-field.md

Examples of the JSON structure used for storing social link data.

```json
[
  { "platform": "instagram", "url": "https://instagram.com/laravelphp" },
  { "platform": "linkedin", "url": "https://linkedin.com/company/laravel" }
]
```

```json
[
  { "platform": "instagram", "url": "" },
  { "platform": "website", "url": "https://example.com" }
]
```

--------------------------------

### Package Asset Installation

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Commands to build and publish the necessary assets for the slug field component.

```bash
# In the package / application directory
npm run build:js:slug-field
npm run build:css
php artisan filament:assets
```

--------------------------------

### Multi-step Profile Editor

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/segmenttabs.md

A practical example using the ghost variant and full-width layout for a user profile editor.

```php
SegmentTabs::make('User Editor')
    ->variant('ghost')
    ->fullWidth()
    ->tabs([
        SegmentTab::make('Basic Info')
            ->icon('heroicon-o-identification')
            ->schema([
                FlexTextInput::make('first_name'),
                FlexTextInput::make('last_name'),
            ]),
        SegmentTab::make('Preferences')
            ->icon('heroicon-o-adjustments-horizontal')
            ->schema([
                Toggle::make('newsletter'),
                Select::make('theme')->options(['light' => 'Light', 'dark' => 'Dark']),
            ]),
    ]);
```

--------------------------------

### Responsive device selector

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/segmentcontrol.md

Example of an icon-only segment control for device selection.

```php
SegmentControl::make('preview_device')
    ->iconOnly()
    ->options([
        'desktop' => ['icon' => 'heroicon-o-computer-desktop', 'label' => 'Desktop'],
        'tablet' => ['icon' => 'heroicon-o-device-tablet', 'label' => 'Tablet'],
        'phone' => ['icon' => 'heroicon-o-device-phone-mobile', 'label' => 'Phone'],
    ])
    ->default('desktop');
```

--------------------------------

### 2FA backup codes example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexverificationcode.md

Configures an 8-character alphanumeric code with custom grouping.

```php
FlexVerificationCode::make('backup_code')
    ->length(8)
    ->allowedCharacters('alphanumeric')
    ->groups([4, 4])
    ->groupSeparator(' ');
```

--------------------------------

### Basic usage of ChoiceCheckboxCards

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/choicecheckboxcards.md

Examples demonstrating stack and grid layouts for multi-select card groups.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\ChoiceCheckboxCards;

ChoiceCheckboxCards::make('features')
    ->options([
        'security' => ['label' => 'Security', 'description' => 'Real-time threat detection'],
        'storage' => ['label' => 'Storage', 'description' => 'Unlimited cloud storage'],
        'analytics' => ['label' => 'Analytics', 'description' => 'Advanced reporting'],
    ])
    ->minSelections(1)
    ->default(['security']);
```

```php
ChoiceCheckboxCards::make('addons')
    ->layout('grid')
    ->gridColumns(['default' => 1, 'sm' => 3])
    ->indicator('check')
    ->options([
        'backups' => ['label' => 'Backups', 'price' => '$5/mo'],
        'monitoring' => ['label' => 'Monitoring', 'price' => '$9/mo'],
        'support' => ['label' => 'Support', 'price' => '$15/mo'],
    ]);
```

--------------------------------

### Define SelectField options

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/shared-concepts.md

Examples of simple and rich array structures for select-based options.

```php
'livewire' => 'Livewire',
```

```php
'laravel' => [
    'label' => 'Laravel',
    'description' => 'The PHP framework for web artisans',
    'icon' => 'heroicon-o-bolt',
    'image' => null,
    'badge' => 'Popular',
    'badge_color' => 'success',
    'disabled' => false,
],
```

--------------------------------

### Initialize FlexRichEditor

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

Basic setup for the FlexRichEditor component within a Filament form schema.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexRichEditor;

FlexRichEditor::make('body')
    ->label('Article body')
    ->json()
    ->wordCount()
    ->columnSpanFull();
```

--------------------------------

### Loading Existing State

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/schedule-field.md

Example of initializing the field with existing record data or a default schedule.

```php
ScheduleField::make('opening_hours')
    ->default(fn (?Location $record): array => $record?->opening_hours
        ?? ScheduleField::defaultSchedule('Europe/Warsaw'));
```

--------------------------------

### Configure SignatureField basic and advanced options

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/signaturefield.md

Use these examples to implement a standard signature field or a more advanced version with fullscreen, undo, and download capabilities.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\SignatureField;

SignatureField::make('signature')
    ->label('Sign here')
    ->penColor('#18181b')
    ->backgroundColor('#ffffff')
    ->required();

SignatureField::make('approval_signature')
    ->fullscreen()
    ->undoable()
    ->downloadable(SignatureField::DOWNLOAD_WEBP)
    ->downloadFilename('approval')
    ->maxSizeKb(64)
    ->minStrokes(2);
```

--------------------------------

### Stored value example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/ratingcolumn.md

Example of the numeric value expected by the column.

```php
$record->rating; // 4.5
```

--------------------------------

### Modern chat input configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flextextareafield.md

A comprehensive example showing a chat-optimized textarea with custom styling and actions.

```php
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');
```

--------------------------------

### Use defaultSchedule helper

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/schedule-field.md

Examples of generating default schedule arrays and overriding field defaults.

```php
ScheduleField::defaultSchedule('Europe/Warsaw');
// Mon–Fri enabled 09:00–17:00, Sat/Sun disabled with empty slots
```

```php
/**
 * @param  list<string>|null  $days  Which days to include (default: all seven)
 * @return array<timezone?: string, days: array<string, array{enabled: bool, slots: list<array{from: string, to: string>>}>}
 */
ScheduleField::defaultSchedule(?string $timezone = null, ?array $days = null): array
```

```php
// Weekdays only in state shape
ScheduleField::defaultSchedule('UTC', ['mon', 'tue', 'wed', 'thu', 'fri']);

// No timezone key (when selector hidden)
ScheduleField::defaultSchedule(null);

// Override field default explicitly
ScheduleField::make('hours')
    ->default(ScheduleField::defaultSchedule('America/New_York'));
```

--------------------------------

### Implement a dashboard activity feed

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/itemcardstack.md

Example of using ItemCardStack with specific spacing and icon-enabled ItemCards.

```php
ItemCardStack::make()
    ->stackGap('sm')
    ->schema([
        ItemCard::make()
            ->title('New Order #1234')
            ->description('Received 2 minutes ago')
            ->icon('heroicon-o-shopping-bag'),
        ItemCard::make()
            ->title('User Registered')
            ->description('John Doe joined the platform')
            ->icon('heroicon-o-user-plus'),
    ]);
```

--------------------------------

### Configure granularity and time precision

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Examples of setting different granularity levels for date and time fields.

```php
use Bjanczak\FilamentFlexFields\Enums\DateTimeGranularity;

// Hour only (minutes zeroed in storage)
FlexDateTimePicker::make('slot')
    ->granularity(DateTimeGranularity::Hour)
    ->hourCycle(24)
    ->default('2026-06-15T08:00:00');

// Minute precision (recommended default for date/time)
FlexDateTimePicker::make('appointment')
    ->granularity(DateTimeGranularity::Minute);

// Seconds — use granularity Second or showSeconds() on time fields
FlexDateTimePicker::make('timestamp')
    ->granularity(DateTimeGranularity::Second)
    ->showSeconds()
    ->default('2026-06-15T14:30:45');

FlexTimeField::make('lap_time')
    ->granularity(DateTimeGranularity::Second)
    ->showSeconds()
    ->hourCycle(24)
    ->default('00:01:23');
```

--------------------------------

### Minimal Blog Post Configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

A basic setup for a blog post field with word count and character limits.

```php
FlexRichEditor::make('body')
    ->json()
    ->wordCount()
    ->maxCharacters(5000)
    ->limitBehavior('soft');
```

--------------------------------

### Transparent Background Color Example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexcolorpickerfield.md

Configures a field to support RGBA output and opacity selection for background colors.

```php
FlexColorPickerField::make('bg_color')
    ->rgba()
    ->alpha()
    ->label('Background Color')
    ->helperText('Select a color with transparency');
```

--------------------------------

### Implement Support Ticket Voice Note

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/voicenoterecorderfield.md

Example of using the field in a support ticket context with validation and helper text.

```php
VoiceNoteRecorderField::make('issue_description')
    ->label('Describe the issue')
    ->disk('public')
    ->directory('tickets/voice-notes')
    ->maxDuration(60)
    ->required()
    ->helperText('Record up to 1 minute.');
```

--------------------------------

### Implement status color picker

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/colorswatchfield.md

Example of a required field for status selection with standard color mappings.

```php
ColorSwatchField::make('status_color')
    ->colors([
        'danger' => '#ef4444',
        'warning' => '#f59e0b',
        'success' => '#10b981',
        'info' => '#3b82f6',
    ])
    ->tooltips(true)
    ->required();
```

--------------------------------

### Stored value example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/trafficsplit.md

Example of the array structure stored by the field, which always sums to 100.

```php
$record->weights; // [50, 25, 25]
```

--------------------------------

### Configure standard FlexTextInput with icons

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flextextinput.md

Demonstrates setting up a basic email input with prefix and hint icons, live updates, and a loading state.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTextInput;
use Filament\Support\Icons\Heroicon;

FlexTextInput::make('email')
    ->label('Email')
    ->email()
    ->prefixIcon(Heroicon::Envelope)
    ->hintIcon(Heroicon::InformationCircle, 'Used for login and notifications.')
    ->live(debounce: 750)
    ->loading()
    ->default('hello@example.com');
```

--------------------------------

### Custom Polish field names configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Example of overriding default field names and host URL in the configuration file.

```php
// config/filament-flex-fields.php
'slug' => [
    'field_title' => 'tytul',
    'field_slug' => 'adres',
    'url_host' => 'https://mojblog.pl',
],
```

```php
// In the Resource — without repeating field names
TitleSlugField::make(
    titleLabel: 'Post title',
    urlPath: '/wpisy/',
),
```

--------------------------------

### Custom database storage formats

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/currencyfield.md

Examples for handling major unit storage via dehydration or Eloquent casts.

```php
CurrencyField::make('price')
    ->currency('PLN')
    ->dehydrateStateUsing(fn (?int $state) => $state === null ? null : $state / 100);
```

```php
// Model
protected function casts(): array
{
    return [
        'price' => MinorUnitsCast::class, // Custom cast: DB decimal ↔ app int
    ];
}
```

--------------------------------

### Create a compact settings list

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/switchfield.md

Use the compact method to reduce padding for dense UI lists.

```php
Section::make('Preferences')
    ->schema([
        SwitchField::make('email_notifs')->compact(),
        SwitchField::make('sms_notifs')->compact(),
        SwitchField::make('push_notifs')->compact(),
    ]);
```

--------------------------------

### Implement a project file manager checklist

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexchecklist.md

Use icons and disabled options to manage file selections in a project context.

```php
FlexChecklist::make('files')
    ->label('Project files')
    ->options([
        'budget' => 'Budget.xlsx',
        'reports' => 'Reports.pdf',
        'archive' => 'Archive.zip',
    ])
    ->icons([
        'budget' => 'heroicon-o-table-cells',
        'reports' => 'heroicon-o-document-text',
        'archive' => 'heroicon-o-archive-box',
    ])
    ->disabledOptions(['archive']);
```

--------------------------------

### Implement post-recording preview

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/audiofield.md

Use this to show an audio player only after a recording has been populated in the field.

```php
AudioField::make('recorded_audio')
    ->label('Listen to your recording')
    ->live()
    ->visible(fn ($state) => filled($state));
```

--------------------------------

### Database migration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/calculator-field.md

Example migration schema for fields used with CalculatorField.

```php
Schema::create('shipments', function (Blueprint $table) {
    $table->id();
    $table->decimal('weight', 10, 2)->nullable();
    $table->unsignedInteger('quantity')->nullable();
    $table->decimal('margin', 5, 2)->nullable();
    $table->timestamps();
});
```

--------------------------------

### Full MatrixChoiceField Configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/matrixchoicefield.md

A comprehensive example demonstrating checkbox mode, row-specific validation, and reactive conditional disabling rules.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\MatrixChoiceField;

MatrixChoiceField::make('feature_priorities')
    ->label('Feature priorities')
    ->helperText('Assign priority per feature. Dark mode High blocks CSV High.')
    ->mode('checkbox')
    ->size('md')
    ->color('primary')
    ->rows([
        'dark_mode' => [
            'label' => 'Dark mode',
            'description' => 'UI theme support',
            'required' => true,
            'max_selections' => 1,
        ],
        'csv_export' => [
            'label' => 'CSV export',
            'min_selections' => 1,
            'max_selections' => 2,
        ],
        'api_access' => [
            'label' => 'API access',
            'disabled' => true,
        ],
    ])
    ->matrixColumns([
        'low' => 'Low',
        'medium' => 'Medium',
        'high' => [
            'label' => 'High',
            'icon' => 'heroicon-o-bolt',
        ],
    ])
    ->requiredRows(['dark_mode'])
    ->disabledCells([
        // Static: always lock CSV → Low (example)
        // 'csv_export' => ['low'],
    ])
    ->disableCellWhen('csv_export', 'high', 'dark_mode', 'high')
    ->disableRowWhen('api_access', 'dark_mode', 'low')
    ->default([
        'dark_mode' => ['high'],
        'csv_export' => ['medium'],
    ]);
```

--------------------------------

### Create a delivery route with markers

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/progressbar.md

Adds visual markers to the progress track to represent start, current, and end points.

```php
ProgressBar::make()
    ->label('Delivery Status')
    ->value(45)
    ->startMarker('heroicon-o-map-pin')
    ->currentMarker('heroicon-o-truck')
    ->endMarker('heroicon-o-home')
    ->remainingTrackStyle('dashed')
    ->color('success');
```

--------------------------------

### Configure dynamic platform lists

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/social-links-field.md

Uses closures to fetch allowed platforms and link limits from tenant settings at runtime.

```php
SocialLinksField::make('social_links')
    ->platforms(fn (): array => tenant()->allowedSocialPlatforms())
    ->maxLinks(fn (): int => tenant()->socialLinkLimit());
```

--------------------------------

### Configure UserColumn for Single and Multiple Users

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/usercolumn.md

Use the basic setup for single BelongsTo relationships or configure stacking for BelongsToMany collections.

```php
use Bjanczak\FilamentFlexFields\Filament\Tables\Columns\UserColumn;

UserColumn::make('author')
    ->label('Author')
    ->nameColumn('name')
    ->emailColumn('email')
    ->avatarColumn('avatar_url')
    ->verificationColumn('email_verified_at');
```

```php
UserColumn::make('members')
    ->label('Team Members')
    ->maxVisibleAvatars(4)
    ->stackedOverlap(10);
```

--------------------------------

### Preset Bundle: withRecommendedDefaults()

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Applies sensible default configurations based on the component mode.

```APIDOC
## withRecommendedDefaults()

### Description
Applies a set of recommended defaults for granularity, closing behavior, and display settings based on the field type.

### Usage
```php
FlexDatePicker::make('date')->withRecommendedDefaults();
FlexTimeField::make('time')->withRecommendedDefaults();
FlexDateTimePicker::make('date_time')->withRecommendedDefaults();
FlexDateRangeField::make('range')->withRecommendedDefaults();
```
```

--------------------------------

### Stored Value Format

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexcolorpickerfield.md

Example of how the stored color string appears in the record.

```php
$record->brand_color; // '#6366F1' or 'rgba(99, 102, 241, 0.8)'
```

--------------------------------

### firstDayOfWeek(int|Closure $day)

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Sets the starting day of the week for the calendar grid.

```APIDOC
## firstDayOfWeek

### Description
Sets the week start for the calendar grid. 0 represents Sunday, 1 represents Monday, up to 6 for Saturday.

### Parameters
- **day** (int|Closure) - Required - The integer representing the starting day of the week.
```

--------------------------------

### Create a reactive price calculator

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/numberstepper.md

Use live updates to trigger calculations based on the current stepper value.

```php
NumberStepper::make('quantity')
    ->minValue(1)
    ->live()
    ->afterStateUpdated(fn (Set $set, $state) => $set('total', $state * 10.5));
```

--------------------------------

### Inherited Filament Field API

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Example of using standard Filament field methods.

```php
Component::make('field_name')
    ->Field();
```

--------------------------------

### Configure Immediate Upload for VoiceNoteRecorderField

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/voicenoterecorderfield.md

Enable immediate upload to storage as soon as the recording is finished.

```php
VoiceNoteRecorderField::make('feedback_audio')
    ->uploadImmediately()
    ->disk('s3')
    ->directory('feedback');
```

--------------------------------

### Apply default toolbar preset

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

Demonstrates the default toolbar configuration for the editor.

```php
FlexRichEditor::make('body');
// Same as:
FlexRichEditor::make('body')
    ->toolbarButtons(FlexRichEditor::make('_ref')->getFlexDefaultToolbarButtons());
```

--------------------------------

### Stored value example

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/duallistboxfield.md

The field stores an array of keys representing the selected items.

```php
$record->roles; // ['admin', 'editor']
```

--------------------------------

### Configure standard theme colors

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/colorswatchfield.md

Initializes a color swatch field with a predefined map of keys to hex values and enables tooltips.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\ColorSwatchField;

ColorSwatchField::make('theme_color')
    ->colors([
        'indigo' => '#6366f1',
        'rose' => '#f43f5e',
        'emerald' => '#10b981',
    ])
    ->sectionLabel('Brand colors')
    ->tooltips(true);
```

--------------------------------

### allowSameDay(bool|Closure $condition = true)

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Configures if start and end can be the same day in range mode.

```APIDOC
## allowSameDay(bool|Closure $condition = true)

### Description
Configures whether start and end can be the same calendar day in range mode.

### Parameters
- **$condition** (bool|Closure) - Optional - Whether to allow same day selection. Defaults to true.
```

--------------------------------

### Configure basic blog permalink

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Sets up a standard permalink structure with a host and path prefix.

```php
TitleSlugField::make(
    urlHost: 'https://wyachts.test',
    urlPath: '/blog/',
),
// Preview: wyachts.test/blog/my-post-title
```

--------------------------------

### Configure Same Day Allowance

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Toggles whether start and end dates can be the same in range mode.

```php
->allowSameDay()
->allowSameDay(false)
```

--------------------------------

### Configure FlexDateRangeField

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Handles start and end date ranges with optional time components.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateRangeField;
use Bjanczak\FilamentFlexFields\Enums\DateTimeGranularity;

FlexDateRangeField::make('booking_range')
    ->label('Booking period')
    ->granularity(DateTimeGranularity::Minute)
    ->allowSameDay(false)
    ->default([
        'start' => '2026-06-10T09:00:00',
        'end' => '2026-06-14T17:00:00',
    ])
    ->withRecommendedDefaults();
```

--------------------------------

### Basic Usage of LinkPreviewField

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Demonstrates how to instantiate the field with basic configuration and default values.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\LinkPreviewField;

LinkPreviewField::make('article_url')
    ->label('Article URL')
    ->placeholder('https://example.com/article')
    ->required();

LinkPreviewField::make('landing_page')
    ->label('Landing page')
    ->previewLayout('card')
    ->previewDebounce(750)
    ->default('https://laravel.com');
```

--------------------------------

### Defining Column Options

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/matrixchoicefield.md

Shows how to configure columns with labels, icons, and optional column-specific icons.

```php
->matrixColumns([
    'low' => 'Low',
    'high' => ['label' => 'High', 'icon' => 'heroicon-o-fire'],
])
->columnIcons([
    'low' => 'heroicon-o-arrow-down',
    'high' => 'heroicon-o-arrow-up',
]);
```

--------------------------------

### Enabling Playground

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/hold-confirm-action.md

Set this environment variable to enable the hold-confirm demos.

```dotenv
FLEX_FIELDS_PLAYGROUND=true
```

--------------------------------

### Define ChoiceCards and ChoiceCheckboxCards options

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/shared-concepts.md

Examples of simple and rich array structures for card-based options.

```php
'pro' => 'Pro plan',
```

```php
'starter' => [
    'label' => 'Starter',
    'description' => 'For individuals and small projects',
    'price' => '$5',
    'price_suffix' => '/mo',
    'meta' => '4,200 subscribers',
    'icon' => 'heroicon-o-sparkles',
    'badge' => 'Popular',
    'badge_color' => 'success',
    'disabled' => false,
],
```

--------------------------------

### Configure Private S3 Recording

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/voicenoterecorderfield.md

Example of storing recordings privately on S3 with immediate upload.

```php
VoiceNoteRecorderField::make('private_note')
    ->disk('s3')
    ->directory('internal/voice')
    ->visibility('private')
    ->uploadImmediately();
```

--------------------------------

### Configure Slug URL Preview

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Set up the URL host and path for the permalink preview, either globally in the config or locally in the resource.

```php
// config/filament-flex-fields.php (after publishing config)
'slug' => [
    'field_title' => 'title',      // title form field name
    'field_slug' => 'slug',        // slug form field name
    'url_host' => env('APP_URL'),  // null = no full URL preview bar
],
```

```php
TitleSlugField::make(
    urlHost: config('app.url'),
    urlPath: '/blog/',
),
```

--------------------------------

### Configure URL Host and Path

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/slugfield-and-titleslugfield.md

Sets the host and path segments for the permalink preview.

```php
->urlHost('https://example.com')
->urlPath('/docs/'),
```

--------------------------------

### Define FlexDateRangeField state structure

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Example of the array structure used for range field state.

```php
[
    'start' => '2026-06-10T09:00:00',
    'end' => '2026-06-14T17:00:00',
]
```

--------------------------------

### Database Migration for NPS

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/nps-field.md

Example migration schema for storing NPS and related survey data.

```php
Schema::create('survey_responses', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->constrained();
    $table->unsignedTinyInteger('nps_score')->nullable();
    $table->unsignedTinyInteger('csat')->nullable();
    $table->string('agreement', 2)->nullable(); // Likert keys: sd, d, n, a, sa
    $table->timestamps();
});
```

--------------------------------

### Define MatrixChoiceField state formats

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/matrixchoicefield.md

Examples of JSON state structures for radio and checkbox modes.

```json
{
  "saturday": "happy",
  "sunday": "neutral"
}
```

```json
{
  "dark_mode": ["high"],
  "csv_export": ["medium", "low"]
}
```

--------------------------------

### Defining Row Options

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/matrixchoicefield.md

Demonstrates how to define rows using both shorthand string labels and rich configuration arrays.

```php
->rows([
    'billing' => 'Billing', // shorthand for ['label' => 'Billing']
    'shipping' => [
        'label' => 'Shipping',
        'description' => 'Delivery options',
        'required' => true,
        'min_selections' => 1,
        'max_selections' => 2,
    ],
])
```

--------------------------------

### Publish configuration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Command to publish the package configuration file.

```bash
php artisan vendor:publish --tag=filament-flex-fields-config
```

--------------------------------

### Apply recommended defaults

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Applies standard configuration presets to various date and time picker components.

```php
FlexDatePicker::make('date')->withRecommendedDefaults();
FlexTimeField::make('time')->withRecommendedDefaults();
FlexDateTimePicker::make('date_time')->withRecommendedDefaults();
FlexDateRangeField::make('range')->withRecommendedDefaults();
FlexMonthPicker::make('period')->withRecommendedDefaults();
FlexYearPicker::make('year')->withRecommendedDefaults();
```

--------------------------------

### Apply Recommended Defaults

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Apply a mode-specific preset bundle to the component.

```php
Component::make('field_name')
    ->withRecommendedDefaults('Brak danych');
```

--------------------------------

### Access Stored Slider Values

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexslider.md

Example of how numeric or range array values are stored in the record.

```php
$record->volume; // 65
$record->price_range; // [200, 800]
```

--------------------------------

### Configure Locales

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/translatablefields.md

Demonstrates various ways to define locales, including inline maps, separate labels, and global configuration.

```php
TranslatableFields::make('Content')
    ->locales(['pl' => 'Polski', 'en' => 'English'])
    ->schema([FlexTextInput::make('title')]);
```

```php
TranslatableFields::make('Content')
    ->locales(['ar', 'en'])
    ->localesLabels([
        'ar' => __('locales.ar'),
        'en' => __('locales.en'),
    ])
    ->schema([FlexTextInput::make('title')]);
```

```php
// config/filament-flex-fields.php
'translatable' => [
    'locales' => ['ar', 'en'],
    'locale_labels' => ['ar' => 'Arabic', 'en' => 'English'],
],
```

```php
TranslatableFields::make('Content')
    ->schema([FlexTextInput::make('title')]);
```

--------------------------------

### Define a rich FlexChecklist with icons and descriptions

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexchecklist.md

Configure options with metadata including labels, descriptions, and icons for a more detailed UI.

```php
FlexChecklist::make('permissions')
    ->options([
        'read' => [
            'label' => 'Read',
            'description' => 'Can view records',
            'icon' => 'heroicon-o-eye',
        ],
        'write' => [
            'label' => 'Write',
            'description' => 'Can edit records',
            'icon' => 'heroicon-o-pencil',
        ],
    ])
    ->color('success');
```

--------------------------------

### Represent stored state

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/creditcardfield.md

Example of the array structure used for the field's dehydrated state.

```php
// Dehydrated state for storage
[
    'number' => '4111111111111111',
    'name' => 'John Doe',
    'expiry' => '12/28',
]
```

--------------------------------

### Implement fixed demo track

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/audiofield.md

Use this to create a read-only audio player with a specific source and custom waveform data.

```php
AudioField::make('demo')
    ->src('https://cdn.example.com/demo.mp3')
    ->readOnly()
    ->waveform(fn () => [30, 70, 45, 90, 55, 40, 75, 50]);
```

--------------------------------

### Shipping Address Form Integration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/countryfield.md

Example of using CountryField within a Filament form schema.

```php
public static function form(Form $form): Form
{
    return $form->schema([
        CountryField::make('shipping_country')
            ->label('Delivery Country')
            ->countries(config('app.shipping_countries'))
            ->browserLocaleDefault()
            ->required(),
    ]);
}
```

--------------------------------

### Configure Webcam and URL Import

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexfileupload-and-fleximageupload.md

Enables additional input methods for image uploads via device camera or remote URL.

```php
FlexImageUpload::make('vehicle_photo')
    ->label('Vehicle Photo')
    ->withRecommendedDefaults()
    ->imagesOnly()
    ->allowWebcamUpload() // Enables the native device camera tab
    ->allowUrlUpload()    // Enables the remote URL download tab
    ->optimizeImages()
    ->maxImageWidth(1920)
    ->maxImageHeight(1080)
    ->disk('public')
    ->directory('vehicle-photos');
```

--------------------------------

### Check bundle budgets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

Run the budget check command to ensure the package size remains within limits.

```bash
cd packages/filament-flex-fields && npm run check:budgets
```

--------------------------------

### Render HTML from field instance

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flex-rich-editor.md

Recommended approach for rendering content by matching the field's configuration.

```php
$html = FlexRichEditor::make('body')
    ->imageVariants([/* same as form */])
    ->responsiveImages()
    ->makeFlexRichContentRenderer($post->body)
    ->toHtml();
```

--------------------------------

### Configure Range Separator

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Sets the text separator between start and end segments in range fields.

```php
->rangeSeparator(' – ')
->rangeSeparator(' to ')
```

--------------------------------

### User Profile Form Integration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/timezonefield.md

Example of integrating the field into a Filament form schema for user settings.

```php
public static function form(Form $form): Form
{
    return $form->schema([
        TimezoneField::make('timezone')
            ->label('Your local time')
            ->browserTimezoneDefault()
            ->browserTimezoneSortFirst()
            ->required(),
    ]);
}
```

--------------------------------

### Configure Camera Performance Settings

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/barcode-scanner-field.md

Optimizes camera usage for laptops by allowing camera switching, limiting FPS, and pausing when the field is hidden.

```php
BarcodeScannerField::make('asset_tag')
    ->allowCameraSwitch()
    ->decodeFps(5) // ~200 ms between attempts
    ->pauseWhenHidden();
```

--------------------------------

### Define Configuration File

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/translatablefields.md

Set default values for locales, labels, and RTL support in the package configuration file.

```php
// config/filament-flex-fields.php
'translatable' => [
    'locales' => ['ar' => 'Arabic', 'en' => 'English'], // or ['ar', 'en']
    'locale_labels' => ['ar' => 'Arabic', 'en' => 'English'],
    'empty_badge_label' => 'empty',
    'rtl_locales' => ['ar', 'he', 'fa', 'ur'],
],
```

--------------------------------

### Configure Basic FlexSlider

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexslider.md

Standard implementation of a volume slider with range, step, and suffix formatting.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexSlider;

FlexSlider::make('volume')
    ->range(0, 100)
    ->step(5)
    ->showValue()
    ->suffix('%')
    ->color('primary');
```

--------------------------------

### Apply production presets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/translatablefields.md

Configure UI behaviors like directionality, empty badges, and panel borders.

```php
TranslatableFields::make('field_name')
    ->directionByLocale()
    ->emptyBadgeWhenAllFieldsAreEmpty('Brak danych')
    ->activeTabWithValue()
    ->withRecommendedDefaults('Brak danych')
    ->borderedPanels(true);
```

--------------------------------

### Build and publish assets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/schedule-field.md

Execute these commands after deployment to ensure the package assets are compiled and published.

```bash
cd packages/filament-flex-fields && npm run build
php artisan filament:assets
```

--------------------------------

### Apply Production Presets

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/translatablefields.md

Helpers for common UX patterns like recommended defaults, bordered panels, RTL direction, empty badges, and active tab selection.

```php
TranslatableFields::make('Article')
    ->locales(['ar' => 'Arabic', 'en' => 'English'])
    ->withRecommendedDefaults('missing')
    ->schema([FlexTextInput::make('title')]);
```

```php
TranslatableFields::make('Article')
    ->locales(['pl' => 'PL', 'en' => 'EN'])
    ->borderedPanels()
    ->schema([
        FlexTextInput::make('title'),
        FlexTextareaField::make('body'),
    ]);
```

```php
'translatable' => [
    'rtl_locales' => ['ar', 'he', 'fa', 'ur'],
],
```

```php
TranslatableFields::make('Content')
    ->locales(['ar', 'en'])
    ->emptyBadgeWhenAllFieldsAreEmpty(__('locales.empty'))
    ->schema([FlexTextInput::make('title')]);
```

```php
TranslatableFields::make('Content')
    ->locales(['ar', 'en'])
    ->activeTabWithValue()
    ->schema([FlexTextInput::make('title')]);
```

--------------------------------

### Set First Day of Week

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/date-and-time-fields.md

Define the starting day of the week for the calendar grid, where 0 is Sunday.

```php
->firstDayOfWeek(1)  // Monday-first (EU)
```

--------------------------------

### Define model and migration

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/barcode-scanner-field.md

Standard migration and model setup for storing barcode values as plain strings.

```php
// Migration
$table->string('sku')->nullable()->unique();

// Model — plain string, no special cast
protected $fillable = ['sku'];
```

--------------------------------

### Configure HTML5 VideoField

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/videofield.md

Initializes a VideoField with a static source, poster image, and custom playback settings.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\VideoField;

VideoField::make('tutorial')
    ->src('https://cdn.example.com/tutorial.mp4')
    ->poster('/images/tutorial-poster.jpg')
    ->title('Getting Started')
    ->subtitle('Learn the basics in 5 minutes')
    ->skipSeconds(15)
    ->pictureInPictureable()
    ->compactControls();
```

--------------------------------

### Configure FlexRadiolist with descriptions

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/flexradiolist.md

Use the options and descriptions methods to define the list items and their corresponding helper text.

```php
use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexRadiolist;

FlexRadiolist::make('plan')
    ->options([
        'basic' => 'Basic Plan',
        'pro' => 'Professional',
        'ent' => 'Enterprise',
    ])
    ->descriptions([
        'basic' => 'Great for individuals starting out.',
        'pro' => 'Advanced features for growing teams.',
        'ent' => 'Custom solutions for large organizations.',
    ]);
```

--------------------------------

### Configure preview layout

Source: https://github.com/janczakb/filament-flex-fields/blob/main/docs/link-preview-field.md

Sets the visual layout of the preview card.

```php
LinkPreviewField::make('url')->previewLayout('card');
```
Tokens:
Raw