https://github.com/smirltech/laravel-form

Ready-to-use form components built for Bootstrap and Livewire.
https://github.com/smirltech/laravel-form

bootstrap5 components form laravel livewire package php

Last synced: 3 months ago
JSON representation

Ready-to-use form components built for Bootstrap and Livewire.

• Host: GitHub
• URL: https://github.com/smirltech/laravel-form
• Owner: smirltech
• License: mit
• Created: 2023-01-13T09:29:06.000Z (over 2 years ago)
• Default Branch: 4.x
• Last Pushed: 2025-01-15T10:59:48.000Z (6 months ago)
• Last Synced: 2025-03-24T04:18:20.569Z (4 months ago)
• Topics: bootstrap5, components, form, laravel, livewire, package, php
• Language: Blade
• Homepage: https://packagist.org/packages/smirltech/laravel-form
• Size: 169 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![Laravel Form](https://banners.beyondco.de/Laravel%20Form.png?theme=light&packageManager=composer+require&packageName=smirltech%2Flaravel-form&pattern=architect&style=style_1&description=A+bunch+of+form+components+ready+to+use&md=1&showWatermark=1&fontSize=100px&images=clipboard-list)

# Laravel Form components

[![Latest Version on Packagist](https://img.shields.io/packagist/v/smirltech/laravel-form.svg?style=flat-square)](https://packagist.org/packages/smirltech/laravel-form)

[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/smirltech/laravel-form/run-tests.yml?branch=main&label=tests&style=flat-square)](https://github.com/smirltech/laravel-form/actions?query=workflow%3Arun-tests+branch%3Amain)

[![Total Downloads](https://img.shields.io/packagist/dt/smirltech/laravel-form.svg?style=flat-square)](https://packagist.org/packages/smirltech/laravel-form)

This is a package that provides a bunch of form components ready to use in your Laravel application and provides the best hanlding for frome validation errors.

Originally created for [Livewire](https://laravel-livewire.com) projects, but can be used in any Laravel project.

- The components are built using [Bootstrap 5](https://getbootstrap.com/docs/5.0/forms/overview/).

- Each component has a label, a name, and a value. You can pass the value as a model attribute or a value attribute.

- Required fields are automatically detected and displayed with a red asterisk.

- Errors are displayed automatically below the input if there is any.

- The `select` uses the [Selectize.js](https://selectize.github.io/selectize.js/) library to display a nice select

  input with search and multiple selection.

- The `ckeditor` uses

  the [CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/laravel.html)

  library to display a nice WYSIWYG editor.

## Installation

Install the package via composer:

```bash

composer require smirltech/laravel-form

```

Add `` component to your layout:

```html

....

```

## Usage

Here are some examples of how to use the components.

### Input

Use the `x-form::input` component to display a text input.

- `type` attribute to set the input type.

- `placeholder` attribute to display a placeholder.

- `required` attribute to set the input as required.

- `wire:model` attribute to bind the input to a model attribute.

- `name` attribute to set the input name.

- `label` attribute to set the input label.

```html

```

![img_2.png](img_2.png)

### Select

use the `x-form::select` component to display a select input with options. you can pass the options as an array or a

collection, or enums.

- `multiple` attribute to allow multiple selection.

- `placeholder` attribute to display a placeholder.'

```html

    @foreach($cities as $city)

    {{$city->name}}

    @endforeach

```

![img.png](img.png)

### Ckeditor

Use the `x-form::ckeditor` component to display a WYSIWYG editor.

- `height` attribute to set the editor height.

- `value` attribute to set the editor value.

```html

```

![img_1.png](img_1.png)

### Input Excel

```html 

```

![img_3.png](img_3.png)

## Contributing

The package is still in development, so feel free to contribute.

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.