Skip to content

BaseField Attributes

TinaH edited this page Dec 8, 2020 · 7 revisions

->default($default)

  • Sets the default value to use for the field. $default = The default value.
  • Used by the reset button if no value exists on the model.
 Input::make('City')->required()->default('Stockholm'),

->wire(string $wire_model_declaration)

  • Override the default wire:model.lazy attribute applied to the input
Input::make('Search')->wire('wire:model.debounce.750ms')

->inputAttr(array $attributes)

  • Do NOT set any wire:model..., use ->wire() instead. Otherwise, it will be applied twice.
  • Overrides the field-attribute['input'] in the config file
  • A very powerful feature because you can apply anything here.
  • Some custom fields does not have this method, like SpatieTags, FileUpload and Trix, as it could break their functionality.

This is a somewhat ridiculous example just to show the power you have with the inputAttr(). In this example Livewire sets the initial value to 3, then Alpine sets it to 2, and finally Alpine sets it to 10, when the component has finished mounting.

Input::make('Integer')
    ->custom()//this field will be ignored in onUpdatModel() and onCreateModel()
    ->type('number')->step(1)->min(1)->max(100)
    ->default(3)
    ->wire('wire:model.defer')//Livewire will not care about this field until form is submitted
    ->inputAttr([
        'x-data' => "{ count: 2 }",
        'x-model' => "count",
        'x-init' => "() => { count = 10 }",
        'class' => "form-input bg-green-500" //replaces any value from config file
    ]),

Another example using inputAttr()

public function tel()
{
    return Input::make('Phone')
        ->type('tel')
        ->prefix('phone:')
        ->above('Example input with inputAttr() maxlength and size')
        ->inputAttr([
            'pattern' => "[0-9]{12}",
            'maxlength' => 12
        ])
        ->placeholder('### ### ### ###')
        ->rules('required');
        ->help('Do not forget to add a pseudo class,
        input:invalid { border: red solid 3px; } or similar to your app.css.
        If you want to take advantage of the html5 pattern attribute');
}

Set attributes on other elements, (write Alpine in backend)

  • You can use the methods mentioned on the Styling page to set attributes on other elements.
  • See another example on the Form Slots page.
Input::make('Name')
    ->rootAttr([
       'x-data' => "{ foo: 'bar'}",
       'class' => 'border rounded',
    ])
    ->inputAttr([
        'x-init' => "foo = 'baz'"
    ])
    ->required(),
Clone this wiki locally