Do NOT set any wire:model..., use the field ->wire() method instead. Otherwise, it will be applied twice.
Overrides the field-attribute['input'] in the config file
Merge with config, example
Input::make('Name')->labelAttr('bg-green-300') //merge with config
Input::make('Name')->labelAttr('bg-green-300', false) //replace config
Alpine Js example
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()//see Manually saving data
->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
]),
Input pattern format, example
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')
//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 full advantage of the html5 pattern attribute
Another Alpine Js example
You can use the methods mentioned on the Styling page to set attributes on other elements.
