TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • inputAttr(array $attributes)
  • Merge with config, example
  • Alpine Js example
  • Input pattern format, example
  • Another Alpine Js example

Was this helpful?

  1. Fields

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

Input::make('Name')
    ->rootAttr([
       'x-data' => "{ foo: 'bar'}",
       'class' => 'border rounded',
    ])
    ->inputAttr([
        'x-init' => "foo = 'baz'"
    ])
    ->required(),
PreviousField methodsNextConditional field

Last updated 3 years ago

Was this helpful?

You can use the methods mentioned on the page to set attributes on other elements.

See another example on the page.

Styling
Form Slots