Documentation

A simple library to make Laravel Blade forms faster and easier

Licence: MIT

Version: 1.x

GitHub: github.com/michalkortas/laravelforms

Packagist: packagist.org/packages/michalkortas/laravelforms

Installation

Composer

composer require michalkortas/larvelforms

Register new ServiceProvider (only if not exists - Laravel register it automatically, but who knows?) in config/app.php

michalkortas\LaravelForms\LaravelFormsServiceProvider::class

Usage

Laravel 7.x & 8.x

Laravel 7 & 8 are only supported version at this time.

You can add own attributes to every component (eg. required, autofocus, readonly, disabled, data-myattr). They will be always pass directly to input form.

Working with Laravel Models

Usage

You can also use Laravel Models to fill every inputs.

<x-form-text :model="$model" name="translation" label="String translation" />

HTML output:

Object key is set by "name" attribute. If you want to change it, use "model-key" attribute instead. This can be also relation path (separator: ".""), eg. firstrelation.second.id

<x-form-text :model="$model" model-key="otherkey" name="translation" label="String translation" />

HTML output:
Inputs with multiple values (eg. select multiple, checkbox)

If you want to get data from your Pivot relation to check multiple options, pass via model-key attribute relation path to related table. Last part of this path is a table field, that should be use to verify checked/selected state.

<x-form-checkbox :model="$model" model-key="departments.id" :options="$departments" label="Select department" />

input[type="text"]

Usage

<x-form-text label="This is simple text label" name="text-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null Ooops...
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="email"]

Usage

<x-form-email label="This is simple email input" name="email-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null Ooops...
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="phone"]

Usage

<x-form-phone label="This is simple phone input" name="email-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null Ooops...
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="date"]

Usage

<x-form-date label="This is simple date input" name="date-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value date null 2024-11-24
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="datetime-local"]

Usage

<x-form-date-time label="This is simple datetime input" name="datetime-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value datetime null 2024-11-24T02:05
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="number"]

Usage

<x-form-number min="0" step="1" label="This is simple number label" name="number-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value number null 25
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

textarea

Usage

<x-form-textarea label="This is simple text label" name="textarea-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null Ooops...
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

select

Usage with simple array

array:3 [
  1 => "one"
  2 => "two"
  3 => "three"
]

<x-form-select label="This is simple text label" name="select-input" value="2" :options="$options" />

HTML output:
Usage with collection
Attention! Default key names are: id & name 

{#310
  +"0": {#319
    +"id": 4
    +"name": "four"
  }
  +"1": {#326
    +"id": 5
    +"name": "five"
  }
}

<x-form-select label="This is simple text label" name="select-input" value="4" :options="$options" />

HTML output:
Usage with collection
Without default key names 

{#315
  +"0": {#330
    +"item_id": 4
    +"item_name": "four"
  }
  +"1": {#328
    +"item_id": 5
    +"item_name": "five"
  }
}

You can change default object key names by passing arguments option-value-key & option-text-key.

<x-form-select label="This is simple text label" name="select-input" value="4" option-value-key="item_id" option-text-key="item_name" :options="$options" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null 5
empty boolean false true
empty-option-value text null none
empty-option-text text null Select from list
option-value-key text id item_id
option-text-key text name item_name
option-text-separator text (space " ") -.-
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

select[multiple="true"]

Passing selected values

You should pass values as array via :value="" attribute.

array:2 [
  0 => 1
  1 => 3
]

Usage with simple array

array:3 [
  1 => "one"
  2 => "two"
  3 => "three"
]

<x-form-select-multiple label="This is simple text label" name="select-input" :value="$values" :options="$options" />

HTML output:
Usage with collection
Attention! Default key names are: id & name 

{#283
  +"0": {#351
    +"id": 4
    +"name": "four"
  }
  +"1": {#362
    +"id": 5
    +"name": "five"
  }
}

<x-form-select-multiple label="This is simple text label" name="select-input" :value="$values" :options="$options" />

HTML output:
Usage with collection
Without default key names 

{#342
  +"0": {#363
    +"item_id": 4
    +"item_name": "four"
  }
  +"1": {#347
    +"item_id": 5
    +"item_name": "five"
  }
}

You can change default object key names by passing arguments option-value-key & option-text-key.

<x-form-select-multiple label="This is simple text label" name="select-input" :value="$values" option-value-key="item_id" option-text-key="item_name" :options="$options" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null 5
empty boolean false true
empty-option-value text null none
empty-option-text text null Select from list
option-value-key text id item_id
option-text-key text name item_name
option-text-separator text (space " ") -.-
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="radio"]

Usage with simple array

array:3 [
  1 => "one"
  2 => "two"
  3 => "three"
]

<x-form-radio label="This is simple text label" name="radio1-input" value="2" :options="$options" />

HTML output:
Usage with collection
Attention! Default key names are: id & name 

{#327
  +"0": {#379
    +"id": 4
    +"name": "four"
  }
  +"1": {#386
    +"id": 5
    +"name": "five"
  }
}

<x-form-radio label="This is simple text label" name="radio2-input" value="4" :options="$options" />

HTML output:
Usage with collection
Without default key names 

{#374
  +"0": {#390
    +"item_id": 4
    +"item_name": "four"
  }
  +"1": {#388
    +"item_id": 5
    +"item_name": "five"
  }
}

You can change default object key names by passing arguments option-value-key & option-text-key.

<x-form-radio label="This is simple text label" name="radio3-input" value="4" option-value-key="item_id" option-text-key="item_name" :options="$options" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null 5
empty boolean false true
inline boolean false true
empty-option-value text null none
empty-option-text text null Select from list
option-value-key text id item_id
option-text-key text name item_name
option-text-separator text (space " ") -.-
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="checkbox"]

Passing selected values

You should pass values as array via :value="" attribute.

array:2 [
  0 => 1
  1 => 3
]

Usage with simple array

array:3 [
  1 => "one"
  2 => "two"
  3 => "three"
]

<x-form-checkbox label="This is simple text label" name="checkbox1-input" :value="$values" :options="$options" />

HTML output:
Usage with collection
Attention! Default key names are: id & name 

{#383
  +"0": {#411
    +"id": 4
    +"name": "four"
  }
  +"1": {#417
    +"id": 5
    +"name": "five"
  }
}

<x-form-checkbox label="This is simple text label" name="checkbox2-input" :value="$values" :options="$options" />

HTML output:
Usage with collection
Without default key names 

{#407
  +"0": {#422
    +"item_id": 4
    +"item_name": "four"
  }
  +"1": {#420
    +"item_id": 5
    +"item_name": "five"
  }
}

You can change default object key names by passing arguments option-value-key & option-text-key.

<x-form-checkbox label="This is simple text label" name="checkbox3-input" :value="$values" option-value-key="item_id" option-text-key="item_name" :options="$options" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null 5
empty boolean false true
inline boolean false true
empty-option-value text null none
empty-option-text text null Select from list
option-value-key text id item_id
option-text-key text name item_name
option-text-separator text (space " ") -.-
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="color"]

Usage

<x-form-color label="This is simple text label" name="color-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value color null #000000
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="password"]

Usage

<x-form-password label="This is simple text label" name="password-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null password
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="hidden"]

Usage

<x-form-hidden label="This is simple text label" name="hidden-input" value="" />

HTML output: Use the force!
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null password
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="url"]

Usage

<x-form-url label="This is simple text label" name="url-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value text null Ooops...
placeholder text null Write something
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class

input[type="radio"] with 2 states (true / false)

Usage

<x-form-boolean label="This is simple text label" name="text-input" value="1" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value boolean false true
value-false text false (bool) no
value-true text true (bool) yes
text-false text No Nope
text-true text Yes Yeah
toggler-class text btn-secondary btn-light
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class
class-true text state-true new-true-class
class-false text state-false new-false-class

input[type="radio"] with 3 states (true / false / null)

Usage

<x-form-nullean label="This is simple text label" name="text-input" value="" />

HTML output:
Options
Parameter Value format Default Example
id text null text-input
name text null text-input
label text null This is simple text label
value boolean false true
value-false text false (bool) no
value-true text true (bool) yes
value-null text null idk
text-false text No Nope
text-true text Yes Yeah
text-null text ? Hmm?
toggler-class text btn-secondary btn-light
group-class text null additional-group-class
label-class text null additional-label-class
feedback-class text null additional-feedback-class
model object [] Model::find(1)
model-key text null object_id
class text null additional-input-class
class-true text state-true new-true-class
class-false text state-false new-false-class
class-null text state-null new-null-class
Up!