{"id":18674281,"url":"https://github.com/simtabi/gesanda","last_synced_at":"2026-01-25T18:01:52.062Z","repository":{"id":83938230,"uuid":"488358206","full_name":"simtabi/gesanda","owner":"simtabi","description":"Ready-to-use and customizable blade components.","archived":false,"fork":false,"pushed_at":"2023-02-26T13:20:57.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-18T11:07:35.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simtabi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-03T20:45:47.000Z","updated_at":"2022-05-03T20:46:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdf06854-c10a-485f-a971-e6833a47a5f7","html_url":"https://github.com/simtabi/gesanda","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/simtabi/gesanda","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Fgesanda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Fgesanda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Fgesanda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Fgesanda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simtabi","download_url":"https://codeload.github.com/simtabi/gesanda/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Fgesanda/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28756432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T16:32:25.380Z","status":"ssl_error","status_checked_at":"2026-01-25T16:32:09.189Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T09:18:18.957Z","updated_at":"2026-01-25T18:01:52.056Z","avatar_url":"https://github.com/simtabi.png","language":"Blade","funding_links":["https://ko-fi.com/arthurlorent","https://paypal.me/arthurlorent"],"categories":[],"sub_categories":[],"readme":"![Laravel Form Components illustration](/docs/gesanda.png)\n\u003cp style=\"text-align: center;\"\u003e\n    \u003ca href=\"https://github.com/Simtabi/gesanda/releases\" title=\"Latest Stable Version\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/release/Simtabi/gesanda.svg?style=flat-square\" alt=\"Latest Stable Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/Simtabi/gesanda\" title=\"Total Downloads\"\u003e\n        \u003cimg src=\"https://img.shields.io/packagist/dt/simtabi/gesanda.svg?style=flat-square\" alt=\"Total Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Simtabi/gesanda/actions\" title=\"Build Status\"\u003e\n        \u003cimg src=\"https://github.com/Simtabi/gesanda/workflows/CI/badge.svg\" alt=\"Build Status\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://coveralls.io/github/Simtabi/gesanda?branch=main\" title=\"Coverage Status\"\u003e\n        \u003cimg src=\"https://coveralls.io/repos/github/Simtabi/gesanda/badge.svg?branch=main\" alt=\"Coverage Status\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"/LICENSE.md\" title=\"License: MIT\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License: MIT\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nSave time and take advantage of a set of dynamical, ready-to-use and fully customizable form components.\n\nComponents are Livewire compatible and can be used with the following UI frameworks:\n* Bootstrap 5\n* Bootstrap 4\n* TailwindCSS 2 (upcoming feature)\n\nFound this package helpful? Please consider supporting my work!\n\n[![Donate](https://img.shields.io/badge/Buy_me_a-Ko--fi-ff5f5f.svg)](https://ko-fi.com/arthurlorent)\n[![Donate](https://img.shields.io/badge/Donate_on-PayPal-green.svg)](https://paypal.me/arthurlorent)\n\n## Compatibility\n\n| Laravel | Livewire | PHP | Package |\n|---|---|---|---|\n| ^8.0|^9.0 | ^2.0 | ^8.0|^8.1 | ^1.0 |\n\n## Upgrade guide\n\n* [From simtabi/laravel-bootstrap-components to simtabi/gesanda](/docs/upgrade-guides/from-laravel-bootstrap-components-to-gesanda.md)\n\n## Usage example\n\nJust call the components you need in your views and let this package take care of the HTML generation time-consuming part.\n\n```blade\n\u003cx-gesanda::form class=\"row\" method=\"PUT\" :action=\"route('user.update', $user)\" :bind=\"$user\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n        \u003cx-gesanda::input name=\"name\"/\u003e\n        \u003cx-gesanda::input type=\"email\" name=\"email\"/\u003e\n        \u003cx-gesanda::textarea name=\"biography\" :locales=\"['fr', 'en']\"/\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n        \u003cx-gesanda::select name=\"hobbies\" :options=\"[1 =\u003e 'Sport', 2 =\u003e 'Cinema', 3 =\u003e 'Literature', 4 =\u003e 'Travel']\" caption=\"Select your favorite hobbies.\" multiple/\u003e\n        \u003cx-gesanda::checkbox name=\"technologies\" :group=\"[1 =\u003e 'Laravel', 2 =\u003e 'Bootstrap', 3 =\u003e 'Tailwind', 4 =\u003e 'Livewire']\" inline/\u003e\n        \u003cx-gesanda::radio name=\"gender\" :group=\"[1 =\u003e 'Male', 2 =\u003e 'Female', 3 =\u003e 'Other']\" inline/\u003e\n        \u003cx-gesanda::toggle-switch name=\"active\"/\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-12 mt-2\"\u003e\n        \u003cx-gesanda::button.link class=\"btn-secondary me-3\"\u003e{{ __('Cancel') }}\u003c/x:form::button.link\u003e\n        \u003cx-gesanda::button.submit/\u003e\n    \u003c/div\u003e\n\u003c/x:form:form\u003e\n```\n\nAnd get these components displayed:\n\n![Laravel Form Components screenshot](/docs/screenshot.png)\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Configuration](#configuration)\n* [Views](#views)\n* [Components](#components)\n  * [Form](#form)\n  * [Input](#input-and-textarea)\n  * [Textarea](#input-and-textarea)\n  * [Select](#select)\n  * [Checkbox](#checkboxes-toggle-switches-and-radios)\n  * [Switch](#checkboxes-toggle-switches-and-radios)\n  * [Radio](#checkboxes-toggle-switches-and-radios)\n  * [Buttons](#buttons)\n* [How to](#how-to)\n  * [Deal with attributes and classes](#deal-with-attributes-and-classes)\n  * [Set id](#set-id)\n  * [Manage label and placeholder](#manage-label-and-placeholder)\n  * [Handle floating label displaying](#handle-floating-label-displaying)\n  * [Set addons](#set-addons)\n  * [Bind data](#bind-data)\n  * [Set custom value](#set-custom-value)\n  * [Handle validation statuses and errors](#handle-validation-statuses-and-errors)\n  * [Add captions](#add-captions)\n  * [Activate multilingual mode](#activate-multilingual-mode)\n  * [Plug with livewire](#plug-with-livewire)\n* [Testing](#testing)\n* [Changelog](#changelog)\n* [Contributing](#contributing)\n* [Credits](#credits)\n* [Licence](#license)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require simtabi/gesanda\n```\n\n## Configuration\n\nYou can publish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=gesanda:config\n```\n\nAmong its configurations, this package allows you to choose which UI framework will be use.\n\nPlease note that you'll have to install and configure the UI framework you want to use before using this package.\n\n## Views\n\nYou can publish the package views to customize them if necessary:\n\n```bash\nphp artisan vendor:publish --tag=gesanda:views\n```\n\n## Components\n\n### Form\n\nComponents can be wrapped into a form component.\n\nIf no custom method is set, a `GET` method will be set by default.\n\nHidden CSRF and spoofing method fields will be automatically generated when needed, according to the defined form method :\n* You won't need to define a `@method()` directive, declare your `PUT`, `PATCH` or `DELETE` action directly in the `action` attribute\n* You won't need to define a `@csrf()` directive, it will be automatically declared with `POST`, `PUT`, `PATCH` and `DELETE` actions\n\nForms are generated with a default `novalidate` HTML attribute, which is preventing browser validation in favor of a server-side validation (which is a good practice for security matters).\n\n```Blade\n\u003cx-gesanda::form method=\"PUT\"\u003e\n    \u003cx-gesanda::input name=\"first_name\"/\u003e\n    ...\n\u003c/x:form::form\u003e\n```\n\n### Input and Textarea\n\nAdd inputs and textarea into your forms.\n\nIf you don't set a custom type to an input, it will take a default `text` type.\n\nRadio, checkbox and button inputs must be used with their own components because of their different behaviour.\n\nTextarea component can be used the same way as an input component but without declaring a type.\n\n```Blade\n\u003cx-gesanda::input type=\"file\" name=\"avatar\"/\u003e\n\u003cx-gesanda::input name=\"first_name\"/\u003e\n\u003cx-gesanda::input type=\"email\" name=\"email\"/\u003e\n...\n\u003cx-gesanda::textarea name=\"description\"/\u003e\n```\n\n### Select\n\nSet select components in your forms.\n\nAuto generate options by providing an associative value/label array.\n\nHTML select elements natively don't accept placeholder attributes, however the select component allows you to handle a placeholder-like option is prepended to the other ones. This placeholder will behave [as for the other components](#manage-label-and-placeholder).\n\nBy default, this select placeholder option is selected, disabled and hidden. However, you'll be able to allow it to be selected in case you need to set a `nullable` field for example. To do that, just add the `allowPlaceholderToBeSelected` attribute to your component.\n\nIn multiple mode, this package will take care about converting the name into an array name, so you don't have to add it manually.\n\n```Blade\n@php($options = [1 =\u003e 'Laravel', 2 =\u003e 'Bootstrap', 3 =\u003e 'Tailwind', 4 =\u003e 'Livewire'])\n\u003cx-gesanda::select name=\"hobby\" placeholder=\"What is your hobby prefered hobby?\" :options=\"$options\" selected=\"1\"/\u003e\n\u003cx-gesanda::select name=\"hobbies\" :options=\"$options\" :selected=\"[2, 3]\" allowPlaceholderToBeSelected multiple/\u003e {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}\n```\n\n### Checkboxes, Toggle switches and Radios\n\nCheckbox, toggle switch and radio components are available for you to use.\n\nBecause radio inputs are never used alone, you'll have to declare a required `group` attribute when using them, awaiting a value/label associative array from which the radio fields will be generated.\n\nRegarding checkbox and toggle switch inputs, you will be able to use them in single or in group mode. To use them in group mode, you'll have to declare a `group` attribute too.\n\nIn group mode, this package will take care about converting the name into an array name, so you don't have to add it manually.\n\nIf you want to display these input components inline, just define an `inline` attribute.\n\n```Blade\n\u003cx-gesanda::checkbox name=\"newsletter_subscription\" :checked=\"true\"/\u003e {{-- 1 generated checkbox --}}\n\u003cx-gesanda::checkbox name=\"technologies\" :group=\"['laravel' =\u003e 'Laravel', 'bootstrap' =\u003e 'Bootstrap']\" :checked=\"laravel\"/\u003e {{-- 2 generated checkboxes --}}\n\u003cx-gesanda::switch name=\"active\" :checked=\"false\" inline/\u003e {{-- 1 generated toggle switch with inline mode --}}\n\u003cx-gesanda::switch name=\"technologies\" :group=\"['tailwind' =\u003e 'Tailwind', 'livewire\" =\u003e 'Livewire']\" :checked=\"livewire\"/\u003e {{-- 2 generated toggle switches --}}\n\u003cx-gesanda::radio name=\"gender\" :group=\"['female' =\u003e 'Female', 'male' =\u003e 'Male']\" :checked=\"male\" inline/\u003e {{-- 2 generated radios with inline mode --}}\n```\n\n### Buttons\n\nSubmit and link button components are available.\n\nSubmit button allows you to trigger a form and will provide a default `__('Submit')` body if none is defined.\n\nLink button allows you to set actions like `Back` or `Cancel` in your forms by providing a link with a button-like display. As this component is an HTML link, it will provide a default title by analysing its body.\n\nBy default, both components will set a base background color if no custom class attribute is defined.\n\n```Blade\n\u003cx-gesanda::form\u003e\n    ...\n    \u003cdiv class=\"d-grid\"\u003e\n        \u003cx-gesanda::button.submit\u003eSubmit this form\u003c/x:form::submit\u003e {{-- Will provide `btn-primary` class with Bootstrap UI --}}\n        \u003cx-gesanda::button.link class=\"btn-secondary\" href=\"{{ back() }}\"\u003e {{-- Will auto-generate `title=\"Back\"` --}}\n            \u003ci class=\"fas fa-undo fa-fw\"\u003e\u003c/i\u003e\n            Back\n        \u003c/x:form::submit\u003e\n    \u003c/div\u003e\n\u003c/x:form::form\u003e\n```\n\n## How to\n\n### Deal with attributes and classes\n\nProvided component are built using [Blade components](https://laravel.com/docs/blade#components).\n\nFollowing how Blade components work, you can set any HTML attributes and classes:\n* Attributes will replace default ones\n* Classes will be merged to existing ones\n\n## Set id\n\nDefine components ids as you would do for any HTML element.\n\nIf no custom id is set, an id will be generated using the kebab cased `\u003ctype\u003e-\u003cname\u003e` values.\n\n```Blade\n\u003cx-gesanda::input id=\"custom-id\" name=\"first_name\"/\u003e {{-- Default id: `input-first-name` --}}\n\n\u003cx-gesanda::textarea id=\"custom-id\" name=\"first_name\"/\u003e {{-- Default id: `textarea-first-name` --}}\n```\n\n### Enable or disable inputs margin bottom\n\nBy default, all input components will declare a bottom margin in order to correctly position themselves in a form.\n\nYou'll sometimes need to disable this default bottom margin: you'll can do this by setting the `marginBottom` attribute to `false`.\n\n```Blade\n\u003cx-gesanda::input name=\"first_name\"/\u003e {{-- Will declare a bottom margin --}}\n\n\u003cx-gesanda::textarea name=\"first_name\" :marginBottom=\"false\"/\u003e {{-- Will not declare any bottom margin --}}\n```\n\n### Manage label and placeholder\n\nYou can define labels on all input components (except for [Radio](#checkbox-switch-and-radio)).\n\nIf no custom label is defined, labels will take the `__('validation.attributes.\u003cname\u003e)` default value.\n\nFollowing the same behaviour, all input components that are allowing the use of a `placeholder` ([Select](#select) included) will provide a default placeholder that will take the `label` value.\n\nYou can override this default value by setting a custom placeholder.\n\nYou also can hide auto-generated label and placeholder by them to `false`.\n\n```Blade\n\u003cx-gesanda::input name=\"first_name\" label=\"First Name\" placeholder=\"Please fill your first name...\"/\u003e {{-- Will display the custom label and placeholder --}}\n\u003cx-gesanda::input name=\"last_name\" :label=\"false\" :placeholder=\"false\"/\u003e {{-- Will hide the label and placeholder --}}\n\u003cx-gesanda::input type=\"tel\" name=\"phone_number\"/\u003e {{-- Will display default auto-generated label and placeholder --}}\n```\n\n### Handle floating label displaying\n\nThis package allows you to enable or disable floating labels displaying.\n\nYou can set the global floating label behaviour with `config('gesanda.floating_label')` config.\n\nYou will be able to override this global behaviour at form level for all contained components.\n\n```Blade\n\u003cx-gesanda::form :floatingLabel=\"true\"\u003e\n    \u003cx-gesanda::input name=\"first_name\"/\u003e {{-- Will display a floating label even if it has been disabled in config --}}\n\u003c/x:form::form\u003e\n```\n\nFinally, you'll also can override all other defined behaviour on components themselves.\n\n```Blade\n    \u003cx-gesanda::input name=\"first_name\" :floatingLabel=\"true\"/\u003e\n```\n\n### Set addons\n\nYou can define `prepend` and `append` HTML addons on input and textarea components.\n\n```Blade\n    \u003cx-gesanda::input name=\"\" prepend=\"\u003ci class=\"fas fa-code fa-fw\"\u003e\u003c/i\u003e\"/\u003e\n    \u003cx-gesanda::input name=\"search\" append=\"\u003ci class=\"fas fa-search fa-fw\"\u003e\u003c/i\u003e\"/\u003e\n```\n\nNote: you may use HTML directly instead of components for complex addon's management.\n\n### Bind data\n\nYou can bind Eloquent Models, objects, collections or arrays in order to autofill bound components values.\n\nBinding data on the form component will trigger the binding of all of its contained components.\n\nYou can bind data directly on a component and override the form binding.\n\nIn case of validation error, components will be repopulated by old values that will override bound values.\n\nFor specific use case, you also can use the `@bind($boundDataBatch)` and the `@endbind` Blade directives to bind a group of components.\n\n```blade\n@php\n    $dataBatch1 = ['description' =\u003e 'A wonderful description'];\n    $dataBatch2 = ['first_name' =\u003e 'John', 'last_name' =\u003e 'Bonham'];\n@endphp\n\u003cx-gesanda::form :bind=\"$user\"\u003e\n    \u003cx-gesanda::input type=\"email\" name=\"email\"/\u003e {{-- Will set the value from `$user-\u003eemail` --}}\n    \u003cx-gesanda::textarea name=\"description\" :bind=\"$dataBatch1\"/\u003e {{-- Will set the value from `$dataBatch1['description`] --}}\n    @bind($dataBatch2)\n        \u003cx-gesanda::input name=\"first_name\"/\u003e {{-- Will set the value from `$dataBatch2['first_name`] --}}\n        \u003cx-gesanda::input name=\"last_name\"/\u003e {{-- Will set the value from `$dataBatch2['last_name`] --}}\n    @endbind\n\u003c/x:form::form\u003e\n```\n\n### Set custom value\n\nData binding can be overridden by setting custom values on components.\n\n```blade\n@php($data = ['description' =\u003e 'A wonderful description'];)\n\u003cx-gesanda::form :bind=\"$user\"\u003e\n    ...\n    \u003cx-gesanda::textarea\n        name=\"description\"\n        :bind=\"$user\"\n        :value=\"$data['description']\"/\u003e {{-- Will set the value from `$data['description`] --}}\n\u003c/x:form::form\u003e\n```\n\n### Handle validation statuses and errors\n\nComponents will be able to display or hide their success/error statuses and error message when a validation error is triggered:\n* If the validation success displaying is activated, components will only be marked as valid when other components in the form are detected as invalid\n* If the validation failure displaying is activated, components in error will be marked as invalid and will display their related error message\n\nYou can control this behaviour at different levels:\n* Define the global default behaviour with `config('gesanda.display_validation_success')` and `config('gesanda.display_validation_failure')`\n* Customize this behaviour on a form and apply it locally for all its contained components\n* Set a specific behaviour directly on a component\n\n```blade\n\u003cx-gesanda::form displayValidationSuccess=\"false\" displayValidationFailure=\"false\"\u003e\n    \u003cx-gesanda::input type=\"email\" name=\"email\"/\u003e {{-- Disabled success/error statuses and error message --}}\n    \u003cx-gesanda::textarea\n        name=\"description\"\n        displayValidationSuccess=\"true\"\n        displayValidationFailure=\"true\"/\u003e {{-- Enabled success/error statuses and error message --}}\n\u003c/x:form::form\u003e\n```\n\nYou also can customize the error bag that should be used to determine components success/error statuses and error messages on form components.\n\n```blade\n\u003cx-gesanda::form errorBag=\"form_error_bag\"\u003e {{-- Error bag for all components within the form --}}\n    @errorbag('group_error_bag') {{-- Error bag for a group of components --}}\n        \u003cx-gesanda::input name=\"first_name\"/\u003e\n        \u003cx-gesanda::input name=\"last_name\"/\u003e\n    @enderrorbag\n    \u003cx-gesanda::input type=\"email\" name=\"email\" errorBag=\"component_error_bag\"/\u003e {{-- Error bag for a specific component --}}\n    ...\n\u003c/x:form::form\u003e\n```\n\n### Add captions\n\nHelp users and display additional instructions under you components by adding captions.\n\n```Blade\n    \u003cx-gesanda::input name=\"name\" caption=\"Please fill this input with your full name.\"/\u003e\n```\n\n### Activate multilingual mode\n\nActivate multilingual mode on `input` and `textarea` components to benefit from the following features:\n* Component duplication: one component per locale will be displayed\n* Name localization: `name=\"description\"` will be transformed into `name=\"description[\u003clocale\u003e]\"`\n* Default label and error message localization: `__(validation.attributes.name)` translation used to generate default label and error message will be appended with `(\u003cLOCALE\u003e)`\n\n```Blade\n\u003cx-gesanda::input name=\"name\" :locales=\"['fr', 'en']\"/\u003e\n\u003cx-gesanda::textarea name=\"description\" :locales=\"['fr', 'en']\"/\u003e\n```\n\n### Plug with Livewire\n\nForm and input components are Livewire-compatible.\n\nInstead of defining a `wire:model` HTML attribute on each component you want to wire as you would do without this package, here you'll just have to define a `wire=\"\u003coptional-modifier\u003e\"` HTML attribute to make this work.\n\nEach wired input component will use its own `name` attribute and convert it to a valid `wire:model=\"\u003cname\u003e\"` one.\n\n```Blade\n\u003cx-gesanda::form wire:submit.prevent=\"submit\"\u003e\n    \u003cx-gesanda::input name=\"name\"/\u003e {{-- Will not be wired --}}\n    \u003cx-gesanda::input type=\"email\" name=\"email\" wire/\u003e {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}\n    \u003cx-form::input name=\"description\" wire=\"lazy\"/\u003e {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}\n    \u003cx-form::submit/\u003e\n\u003c/x:form::form\u003e\n```\n\nFollowing the same logic, you also can wire input components directly from the form they are contained into.\n\n```Blade\n\u003cx-form::form wire:submit.prevent=\"submit\" wire\u003e\n    \u003cx-form::input type=\"email\" name=\"email\"/\u003e {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}\n    \u003cx-form::input name=\"description\" wire=\"lazy\"/\u003e {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}\n    \u003cx-form::submit/\u003e\n\u003c/x:form::form\u003e\n```\n\nFor specific use case, you also can use the `@wire($modifier)` and the `@endwire` Blade directives to wire a group of components with a specific Livewire modifier.\n\n```Blade\n\u003cx-form::form wire:submit.prevent=\"submit\" wire=\"lazy\"\u003e\n    \u003cx-form::input name=\"first_name\"/\u003e {{-- Will bind the value from the Livewire component `$first_name` property with the `lazy` Livewire modifier --}}\n    @wire('debounce.150ms')\n        \u003cx-form::input name=\"last_name\"/\u003e {{-- Will bind the value from the Livewire component `$last_name` property with the `debounce.150ms` Livewire modifier --}}\n    @endbind\n    @wire(null)\n        \u003cx-form::input type=\"email\" name=\"email\"/\u003e {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}\n        \u003cx-form::input name=\"description\" wire=\"lazy\"/\u003e {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}\n    @endbind\n    \u003cx-form::submit/\u003e\n\u003c/x-form::form\u003e\n```\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Arthur LORENT](https://github.com/Simtabi)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimtabi%2Fgesanda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimtabi%2Fgesanda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimtabi%2Fgesanda/lists"}