Form Builder Fields

Here's an overview of all fields that are available in the Form Builder.

Text Input Field

Renders an Input Component.

Input::make('name')
->label('Enter your name')
->rules('required', 'max:255')
->help('I need somebody!')
->placeholder('John Doe')
->minLength(2)
->maxLength(255);
// or:
Text::make('name');

You may also define the validation rules as an array or a piped string:

Input::make('text')
->rules(['required', 'max:255'])
->rules('required|max:255');

There are some additional methods that you may call on the field:

Input::make('text')
->append('@splade.dev') // Appends a text to the field
->prepend('www.') // Prepends a text to the field
->placeholder('Text') // Placeholder value for the field
->disabled() // Disables an input field
->readonly() // Makes an input read-only
->class('w-1/2') // Add additional classes to the field
->attributes(['data-custom' => 'foo']); // Add additional attributes

Hidden Field

Hidden::make('hidden_field');
// or:
Input::make('hidden_field')->hidden();

Number

Number::make('number')
->label('Number input')
->minValue(1)
->maxValue(100)
->unsigned(), // alias for ->minValue(0)
->step(0.01);

Email

Email::make('email');
// or:
Input::make('email')->email();

Passwords

Password::make('password');
// or:
Input::make('password')->password();

Colorpicker

Color::make('color');
// or:
Input::make('color')->color();

Textarea

Renders a Textarea Component.

Textarea::make('textarea')->autosize();

Date and Time

Renders an Input Component with Flatpickr.js integation.

Date

Date::make('date');
Date::make('date')->date(['showMonths' => 2]); // Flatpickr options

Time

Time::make('time');
Time::make('time')->time(['time_24hr' => false]); // Flatpickr options

Datetime

Datetime::make('datetime');

Files

Renders an File Component with optional Filepond integation.

File::make('photo')
->multiple() // Enables selecting multiple files
->filepond() // Enables filepond
->accept('image/jpeg')
->accept(['image/png', 'image/jpeg']);

Additional Filepond configuration:

File::make('photo')
->filepond()
->server() // Enables asynchronous uploads of files
->preview() // Show image preview
->minSize('1Mb')
->maxSize('10Mb')
->width(120)
->height(120)
->minWidth(150)
->maxWidth(500)
->minHeight(150)
->maxHeight(500)
->minResolution(150)
->maxResolution(99999)

Checkboxes

Renders a Checkbox Component.

Checkboxes can be defined as separate fields:

Checkbox::make('options[]')->label('Checkbox 1')->value('checkbox-1');
Checkbox::make('options[]')->label('Checkbox 2')->value('checkbox-2');

Or as an options array:

Checkboxes::make('options')
->label('Choose your options')
->options([
'option-1' => 'Option 1',
'option-2' => 'Option 2',
'option-3' => 'Option 3',
])
->inline(); // inline is optional

Radios

Renders a Radio Component.

Radios can be defined as separate inputs:

Radio::make('option')->label('Radio 1')->value('radio-1'),
Radio::make('option')->label('Radio 2')->value('radio-2'),
Radio::make('option')->label('Radio 3')->value('radio-3')->help('I need somebody!'),

Or as an array:

Radios::make('theme')
->label('Choose a theme')
->options([
'dark' => 'Dark theme',
'light' => 'Light theme',
'system' => 'System theme',
])
->inline(); // inline is optional

Selects

Renders a Select Component.

$options = [
'be' => 'Belgium',
'de' => 'Germany',
'fr' => 'France',
'lu' => 'Luxembourg',
'nl' => 'The Netherlands',
];
Select::make('country')
->label('Choose a country')
->options($options);
Select::make('countries[]')
->label('Choose multiple countries')
->options($options)
->multiple() // Enables choosing multiple options
->choices(); // Enables the Choices.js integration
Select::make('countries[]')
->options($options)
->multiple()
->choices(['searchEnabled' => false]); // Pass Choices.js options
Select::make('user')
->label('Select with data from a remote URL')
->remoteUrl('/api/users');
Select::make('user')
->label('Select with data from a remote URL with a remote root')
->remoteUrl('/api/users')
->remoteRoot('data.users')
->optionLabel('name')
->optionValue('id');
Select::make('user')
->label('Select with Option Label and Value')
->options([
['user_id' => 10, 'user_name' => 'John'],
['user_id' => 20, 'user_name' => 'Jane'],
['user_id' => 30, 'user_name' => 'Mary'],
['user_id' => 40, 'user_name' => 'Peter'],
])
->optionLabel('user_name')
->optionValue('user_id');

Submit

Renders a Submit Component.

Submit::make()->label('Send')

Button

Button::make('close_button')
->label('Close Modal')
->attributes(['@click.prevent' => 'form.restore'])
->danger() // optional
->secondary(); // optional