Custom field attributes

Some custom fields does not have these methods, like SpatieTags, FileUpload and Trix, as it could break their functionality.

//Field attribute methods and which config value they correspond to
rootAttr(array $attributes, bool $mergeClasses = true) //field-attribute['root']
beforeAttr(array $attributes, bool $mergeClasses = true) //field-attribute['before']
beforeTextAttr(array $attributes, bool $mergeClasses = true) //field-attribute['before-text']
aboveAttr(array $attributes, bool $mergeClasses = true) //field-attribute['above']
belowAttr(array $attributes, bool $mergeClasses = true) //field-attribute['below']
belowWrapperAttr(array $attributes, bool $mergeClasses = true) //field-attribute['below-wrapper']
afterTextAttr(array $attributes, bool $mergeClasses = true) //field-attribute['after-text']
afterLabelAttr(array $attributes, bool $mergeClasses = true) //field-attribute['after-label']

//custom input attribute
inputAttr(array $attributes) //no value in config

inputAttr(array $attributes)

• 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.

• 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(),