{"id":15650421,"url":"https://github.com/dcblogdev/laravel-blade-components","last_synced_at":"2025-06-13T17:07:42.850Z","repository":{"id":56964049,"uuid":"278755970","full_name":"dcblogdev/laravel-blade-components","owner":"dcblogdev","description":"Laravel Blade components collection","archived":false,"fork":false,"pushed_at":"2025-02-24T23:45:06.000Z","size":57,"stargazers_count":37,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T14:02:22.459Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/dcblogdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["dcblogdev"]}},"created_at":"2020-07-11T00:00:37.000Z","updated_at":"2025-02-24T23:44:15.000Z","dependencies_parsed_at":"2024-10-03T12:35:07.599Z","dependency_job_id":"52b58bfb-c126-4131-b995-e53f58f8c2a4","html_url":"https://github.com/dcblogdev/laravel-blade-components","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"fbfad4cdde919831eec34d9a457a2b44ff47e024"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/dcblogdev/laravel-blade-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcblogdev%2Flaravel-blade-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcblogdev%2Flaravel-blade-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcblogdev%2Flaravel-blade-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcblogdev%2Flaravel-blade-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcblogdev","download_url":"https://codeload.github.com/dcblogdev/laravel-blade-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcblogdev%2Flaravel-blade-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259686111,"owners_count":22896053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-10-03T12:34:34.336Z","updated_at":"2025-06-13T17:07:42.827Z","avatar_url":"https://github.com/dcblogdev.png","language":"Blade","funding_links":["https://github.com/sponsors/dcblogdev"],"categories":[],"sub_categories":[],"readme":"## Community\n\nThere is a Discord community. https://discord.gg/VYau8hgwrm For quick help, ask questions in the appropriate channel.\n\n# Laravel Blade components collection\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/dcblogdev/laravel-blade-components.svg?style=flat-square)](https://packagist.org/packages/dcblogdev/laravel-blade-components)\n[![Total Downloads](https://img.shields.io/packagist/dt/dcblogdev/laravel-blade-components.svg?style=flat-square)](https://packagist.org/packages/dcblogdev/laravel-blade-components)\n\nRe-usable Laravel Blade components for your projects\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require dcblogdev/laravel-blade-components\n```\n\n## Usage \n\n## Form components\n\n* [Open](#open)\n* [Input](#form-input)\n* [Textarea](#form-textarea)\n* [Checkbox](#form-checkbox)\n* [Radio](#form-radio)\n* [Select](#form-select)\n* [Button](#form-button)\n\nAll form components accept option parameters that such as class='' style=''\n\n\u003e When the method is set to PUT, PATCH or DELETE the @method() will be applied automatically.\n### Open \n\nDefaults to post method and CSRF token\n\n``` php\n\u003cx-form.open\u003e\n\n\u003c/x-form.open\u003e\n```\n\nThe method and actions can be passed:\n\n``` php\n\u003cx-form.open method='delete' action='delete-comment'\u003e\n\n\u003c/x-form.open\u003e\n```\n\n### Form input\n\nCreate an input with a name, the name will be used as the label as long as the label is not provided.\n\n```php\n\u003cx-form.input name='username'\u003e\u003c/x-form.input\u003e\n```\n\nOutputs:\n\n```HTML\n\u003cdiv\u003e\n    \u003clabel for='username'\u003eUsername\u003c/label\u003e\n    \u003cinput type='text' name='username' id='username' value=''\u003e\n\u003c/div\u003e \n```\n\nUse a label\n\n```php\n\u003cx-form.input name='username' label='Username'\u003e\u003c/x-form.input\u003e\n```\n\nUse an id and a class\n\n```php\n\u003cx-form.input name='username' label='Username' id='username' class='form-input'\u003e\u003c/x-form.input\u003e\n```\n\nThe type is set to test by default, it can be changed\n\n```php\n\u003cx-form.input name='password' type='password'\u003e\u003c/x-form.input\u003e\n```\n\nSet the input value\n\n```php\n\u003cx-form.input name='username' label='Username'\u003e{{ $username }}\u003c/x-form.input\u003e\n```\n\n### Form textarea\n\n```php\n\u003cx-form.textarea name='comments'\u003e\u003c/x-form.textarea\u003e\n```\n\nSet the rows and columns\n\n```php\n\u003cx-form.textarea name='comments' cols='10' rows='10'\u003e\u003c/x-form.textarea\u003e\n```\n\nSet the textarea data\n\n```php\n\u003cx-form.textarea name='comments' cols='10' rows='10'\u003e{{ $comments }}\u003c/x-form.textarea\u003e\n```\n\n### Form checkbox\n\nA checkbox can also be defined, set the name and value\n\n```php\n\u003cx-form.checkbox name='terms' value='1'\u003e\u003c/x-form.checkbox\u003e\n```\n\nCheck the checkbox by passing its value, as long its a match the checkbox will be checked.\n\n```php\n\u003cx-form.checkbox name='terms' value='1'\u003e1\u003c/x-form.checkbox\u003e\n```\n\nor \n\n```php\n\u003cx-form.checkbox name='terms' value='1'\u003e{{ $terms }}\u003c/x-form.checkbox\u003e\n```\n\n### Form radio\n\nA radio can also be defined, set the name, label and value\n\n```php\n\u003cx-form.radio name='result' label='Won' value='Won'\u003e\u003c/x-form.radio\u003e\n\u003cx-form.radio name='result' label='Lost' value='Lost'\u003e\u003c/x-form.radio\u003e\n\u003cx-form.radio name='result' label='Draw' value='Draw'\u003e\u003c/x-form.radio\u003e\n```\n\nPass a value which will check the matching radio.\n\n```php\n\u003cx-form.radio name='result' label='Won' value='Won'\u003e{{ $result }}\u003c/x-form.radio\u003e\n\u003cx-form.radio name='result' label='Lost' value='Lost'\u003e{{ $result }}\u003c/x-form.radio\u003e\n\u003cx-form.radio name='result' label='Draw' value='Draw'\u003e{{ $result }}\u003c/x-form.radio\u003e\n```\n\nCheck the checkbox by passing its value, as long its a match the checkbox will be checked.\n\n```php\n\u003cx-form.checkbox name='terms' value='1'\u003e1\u003c/x-form.checkbox\u003e\n```\n\nor \n\n```php\n\u003cx-form.checkbox name='terms' value='1'\u003e{{ $terms }}\u003c/x-form.checkbox\u003e\n```\n\n### Form select\n\ncreate a select menu set the name and placeholder for the initial option \n\n```php\n\u003cx-form.select name='types' placeholder='Select'\u003e\n\n\u003c/x-form.select\u003e\n```\n\nLeave off the placeholder to have only the select and options that can be selected\n\n```php\n\u003cx-form.select name='types'\u003e\n\n\u003c/x-form.select\u003e\n```\n\nIn order to set the option an array is needed and is looped over and then a nested component is used.\n\nPass in the key and value from the array\n\n```php\n@php\n$options = [1 =\u003e 'one', 2 =\u003e 'two', 3 =\u003e 'three'];\n@endphp\n\n\u003cx-form.select name='types' placeholder='Select'\u003e\n    @foreach($options as $key =\u003e $value)\n        \u003cx-form.selectoption key='{{ $key }}' value='{{ $value }}'\u003e\u003c/x-form.selectoption\u003e\n    @endforeach\n\u003c/x-form.select\u003e\n```\n\n### Form button\n\nCreate a button, defaults to a submit type\n\n```php\n\u003cx-form.button name='submit'\u003eSubmit\u003c/x-form.button\u003e\n```\n\nCreate a button, using only the defaults and a label\n\n```php\n\u003cx-form.button\u003eSubmit\u003c/x-form.button\u003e\n```\n\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email dave@dcblog.dev instead of using the issue tracker.\n\n## Credits\n\n- [David Carr](https://github.com/dcblogdev)\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%2Fdcblogdev%2Flaravel-blade-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcblogdev%2Flaravel-blade-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcblogdev%2Flaravel-blade-components/lists"}