Simple Form Builder class based on Laravel & Bootstrap 5

Installs: 1 178

Dependents: 3

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

Language:Blade

1.4.5 2025-03-15 19:39 UTC

README

Livewire compatible form elements. Styled with Bootstrap 5.

Currently WIP

Created by: SteelAnts s.r.o.

Total Downloads

Installation

npm|pnpm|bun i quill quill-table-ui quill-mention

Include scripts

app.js

import './quill';

app.scss

import "./quill";

Examples

Form

Attributes:

  • action
  • method
<x-form::form method="DELETE" action="action-url">
    ...
</x-form::form>    

<x-form::form wire:submit="save">
    ...
</x-form::form>   

Automatically inserts _method and _token base on method attribute

<form enctype="multipart/form-data" action="action-url" method="POST">
    <input type="hidden" name="_token" value="xxxxxxxx" autocomplete="off">    
    <input type="hidden" name="_method" value="DELETE">
    ...
</form>

<form wire:submit="save" enctype="multipart/form-data">
    ...
</form>

Input

Attributes:

  • name - Input name (required for non-livewire use)
  • label - Input label (optional)
  • help - Help text
  • group-class - Class of wrapping element
  • value - value
<x-form::input group-class="mb-3" type="text" name="test" id="xxxx" label="Basic input" placeholder="This is placeholder" help="Help text is here"/>

<x-form::input type="text" wire:model="test" label="Livewire input"/>

Select

Attributes:

  • name - Input name (required for non-livewire use)
  • label - Input label (optional)
  • help - Help text
  • group-class - Class of wrapping element
  • options - Array of values
  • value - Selected value (for non-livewire use)
  • placeholder - Placeholder (hidden option withou value)
  • value - value
@php
    $options = [
        1 => 'one',
        2 => 'two',
        3 => 'three',
    ];
@endphp

<x-form::select wire:model="select" group-class="mb-3" label="Livewire Select" :options="$options" placeholder="Select value..."/>

<x-form::select name="select" group-class="mb-3" label="Basic Select" value="2" :options="$options" placeholder="Select value..."/>

Textarea

Attributes:

  • name - Input name (required for non-livewire use)
  • label - Input label (optional)
  • help - Help text
  • group-class - Class of wrapping element
  • value - value
<x-form::textarea wire:model="textarea"/>

Quill

  • name - Input name (required for non-livewire use)
  • label - Input label (optional)
  • help - Help text
  • group-class - Class of wrapping element
  • mentions - Users for @ mentions. (see quill-mention package for more info)
  • tags - Hashtags (see quill-mention package for more info)
<x-form::quill
    group-class="mb-3"
    label="Quill"
    name="quill"
    value="This is init value from html"
    :mentions="[{id: 1, value: 'SteelAnts'}]"
    :tags="[{id: 1, value: 'Laravel'}]"
/>
<x-form::quill 
    group-class="mb-3"
    label="Quill" 
    wire:model="quill" 
/>

Button

<x-form::button class="btn-primary" type="submit">submit</x-form::button>

Notes

  • Non-livewire elment require name attribute
  • Livewire element require wire:model* attribute.
  • Values are inserted with old()
  • All attributes are passed down to input/select/texarea element.

Development

  1. Create subfolder /packages at root of your laravel project

  2. clone repository to sub folder /packages (you need to be positioned at root of your laravel project in your terminal)

git clone https://github.com/steelants/Laravel-Form.git ./packages/Laravel-Form
  1. edit composer.json file
"autoload": {
	"psr-4": {
		"SteelAnts\\Form\\": "packages/Laravel-Form/src/",
	}
}
  1. Add provider to bootstrap/providers.php
return [
	...
    SteelAnts\Form\FormServiceProvider ::class,
	...
];

Contributors

Other Packages

steelants/laravel-auth

steelants/laravel-boilerplate

steelants/datatable

steelants/form

steelants/modal

steelants/laravel-tenant