PHPackages adzchappers/blade-components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. adzchappers/blade-components ActiveLibrary[Templating & Views](/categories/templating) adzchappers/blade-components ============================ A set of components to use within Laravel Blade views 1.0.1(3w ago)04MITPHPPHP ^8.2CI passing Since May 28Pushed 1w ago1 watchersCompare [ Source](https://github.com/adzchappers/blade-components)[ Packagist](https://packagist.org/packages/adzchappers/blade-components)[ RSS](/packages/adzchappers-blade-components/feed)WikiDiscussions main Synced 1w ago READMEChangelog (3)Dependencies (12)Versions (4)Used By (0) Blade Components ================ [](#blade-components) [![Latest Version on Packagist](https://camo.githubusercontent.com/347dbb55859f32898ac1751e60738e8d4488150c62143eef4818b96bcb3208a7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61647a63686170706572732f626c6164652d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/adzchappers/blade-components)[![Tests](https://github.com/adzchappers/blade-components/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/adzchappers/blade-components/actions/workflows/tests.yml)[![Pint](https://github.com/adzchappers/blade-components/actions/workflows/pint.yml/badge.svg?branch=main)](https://github.com/adzchappers/blade-components/actions/workflows/pint.yml)[![Static Analysis](https://github.com/adzchappers/blade-components/actions/workflows/static-analysis.yml/badge.svg?branch=main)](https://github.com/adzchappers/blade-components/actions/workflows/static-analysis.yml)[![Total Downloads](https://camo.githubusercontent.com/fa8915d2f85f7b07ab3e6a9880c235db6b4d3de22cb0feaaa3193decf55791df/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61647a63686170706572732f626c6164652d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/adzchappers/blade-components) A set of javascript free Tailwind-styled Blade components for making building blade templates easier. Features -------- [](#features) - Components for standard form elements with Tailwind CSS classes out of the box - Automatic error rendering alongside each input - Old-input repopulation via `old()` after failed form submissions - Method spoofing for `PUT`, `PATCH`, and `DELETE` forms with automatic CSRF output - Dot-notation conversion for array field names (e.g. `items[0][name]` → `items.0.name`) - ARIA attributes (`aria-required`, `aria-disabled`, `aria-readonly`) applied automatically - Easy override customisations Requirements ------------ [](#requirements) - PHP 8.2 or higher - Laravel 12 or higher Installation ------------ [](#installation) Install the package with composer: ``` composer require adzchappers/blade-components ``` Optionally publish the configuration file: ``` php artisan vendor:publish --tag="blade-components-config" ``` Tailwind CSS ------------ [](#tailwind-css) The package's Blade views ship with Tailwind v4 utility classes. Add a `@source` directive to your CSS entry point so Tailwind scans the package views, and load the `@tailwindcss/forms` plugin: ``` /* app.css */ @import "tailwindcss"; @plugin "@tailwindcss/forms"; @source "../../vendor/adzchappers/blade-components/resources/views"; ``` Adjust the `@source` path to be relative to your CSS file's location within your project. Configuration ------------- [](#configuration) After publishing, `config/blade-components.php` exposes two keys: - **`prefix`** - A string prepended to every component name. With `'prefix' => 'ac'`, `` becomes ``. Defaults to `''` (no prefix). - **`components`** - A map of component name → `['class' => ..., 'view' => ...]`. Override either entry to swap in a custom class or Blade view for any component. ``` // config/blade-components.php return [ 'prefix' => '', 'components' => [ 'form-input' => [ 'class' => \App\View\Components\MyFormInput::class, 'view' => 'blade-components::forms.form-input', ], // ... ], ]; ``` Usage ----- [](#usage) ### Form structure [](#form-structure) #### `x-form` [](#x-form) Renders an HTML `` tag. Automatically outputs a CSRF token and a spoofed method field when using `PUT`, `PATCH`, or `DELETE`. Normalises the `method` attribute to uppercase. PropTypeDefaultDescription`method``string``'POST'`HTTP method. Normalised to uppercase.`has-files``bool``false`Adds `enctype="multipart/form-data"`.Additional attributes (e.g. `class`, `action`, `id`) are merged onto the `` element. ``` {{-- CSRF added automatically --}} Save {{-- PUT form with file upload --}} {{-- CSRF + _method=PUT added automatically --}} Update ``` --- #### `x-form-fieldset` [](#x-form-fieldset) Wraps content in a `` with an optional ``. Supports disabling the entire group. PropTypeDefaultDescription`legend``string|null``null`Legend text. Omitted when not set.`disabled``bool``false`Adds `disabled aria-disabled="true"`.``` {{-- Disabled group --}} ``` --- ### Inputs [](#inputs) All input components share these behaviours: old-input repopulation, automatic error display, and ARIA attribute rendering. See [Behaviours](#behaviours) for details. #### `x-form-input` [](#x-form-input) Renders a single `` element wrapped in a `` with an optional `` and error message. Hidden inputs (`type="hidden"`) render without the wrapper, label, or error. PropTypeDefaultDescription`name``string`-Field name. Required.`id``string|null``null`Element `id`. Auto-generated from `name` when not set.`label``string|null``null`Label text. No `` rendered when omitted.`type``string``'text'`Input type (e.g. `email`, `password`, `file`, `hidden`).`placeholder``string|null``null`Placeholder text.`value``string|null``null`Initial value. Overridden by old input when present.`required``bool``false`Adds `required aria-required="true"`.`disabled``bool``false`Adds `disabled aria-disabled="true"`.`readonly``bool``false`Adds `readonly aria-readonly="true"`.`show-error``bool``true`Renders the field error message. Set to `false` to suppress.``` ``` --- #### `x-form-textarea` [](#x-form-textarea) Renders a `` with an optional `` and error message. PropTypeDefaultDescription`name``string`-Field name. Required.`id``string|null``null`Element `id`. Auto-generated from `name` when not set.`label``string|null``null`Label text. No `` rendered when omitted.`placeholder``string|null``null`Placeholder text.`value``string|null``null`Initial content. Overridden by old input when present.`required``bool``false`Adds `required aria-required="true"`.`disabled``bool``false`Adds `disabled aria-disabled="true"`.`readonly``bool``false`Adds `readonly aria-readonly="true"`.`show-error``bool``true`Renders the field error message. Set to `false` to suppress.``` ``` --- #### `x-form-select` [](#x-form-select) Renders a `` element with an optional `` and error message. PropTypeDefaultDescription`name``string`-Field name. Required.`id``string|null``null`Element `id`. Auto-generated from `name` when not set.`label``string|null``null`Label text. No `` rendered when omitted.`options``array``[]`Associative array of `value => label` pairs.`selected``string|array|null``null`Selected value(s). Overridden by old input when present.`multiple``bool``false`Enables multi-select.`required``bool``false`Adds `required aria-required="true"`.`disabled``bool``false`Adds `disabled aria-disabled="true"`.`readonly``bool``false`Adds `readonly aria-readonly="true"`.`show-error``bool``true`Renders the field error message. Set to `false` to suppress.``` {{-- Multi-select --}} ``` --- #### `x-form-checkbox` [](#x-form-checkbox) Renders a single `` with an optional `` and error message. Handles old-input correctly - if the form was previously submitted and the checkbox was unchecked, it stays unchecked. Whilst errors display as default on checkboxes, you might want to set them to false if you have a group of checkboxes and call the error manually so the errors aren't duplicated after every checkbox. PropTypeDefaultDescription`name``string`-Field name. Required.`id``string|null``null`Element `id`. Auto-generated from `name` when not set.`label``string|null``null`Label text. No `` rendered when omitted.`value``string|null``'1'`The value submitted when checked.`checked``bool``false`Whether the checkbox is initially checked.`required``bool``false`Adds `required aria-required="true"`.`disabled``bool``false`Adds `disabled aria-disabled="true"`.`readonly``bool``false`Adds `readonly aria-readonly="true"`.`show-error``bool``true`Renders the field error message. Set to `false` to suppress.``` ``` --- #### `x-form-radio` [](#x-form-radio) Renders a single `` with an optional ``. Typically used inside an `` to group related options. Whilst errors display as default on radios, you might want to set them to false if you have a group of radios and call the error manually so the errors aren't duplicated after every radio. PropTypeDefaultDescription`name``string`-Field name. Required.`id``string|null``null`Element `id`. Auto-generated from `name` when not set.`label``string|null``null`Label text. No `` rendered when omitted.`value``string|null``'1'`The value submitted when this option is selected.`checked``bool``false`Whether this option is initially selected.`required``bool``false`Adds `required aria-required="true"`.`disabled``bool``false`Adds `disabled aria-disabled="true"`.`readonly``bool``false`Adds `readonly aria-readonly="true"`.`show-error``bool``true`Renders the field error message. Set to `false` to suppress.``` ``` --- ### Supporting [](#supporting) #### `x-form-label` [](#x-form-label) Renders a `` element. Used automatically by input components when `label` is set, but also available standalone for custom layouts. PropTypeDefaultDescription`for``string`-The `id` of the associated input. Required.`required``bool``false`Appends a required indicator (`*`) to the label text.``` Email address ``` --- #### `x-form-button` [](#x-form-button) Renders a `` element. Validates the `type` attribute and falls back to `submit` for unrecognised values. When the slot is empty, the button renders the translatable string `Submit` as its label. PropTypeDefaultDescription`type``string``'submit'`Button type: `submit`, `button`, or `reset`.``` Save changes Cancel Clear form ``` --- #### `x-form-error` [](#x-form-error) Renders the first validation error message for a named field. Used automatically by input components, but also available standalone. PropTypeDefaultDescription`name``string`-Field name to look up. Supports array notation (e.g. `items[0][name]`). Required.`bag``string``'default'`The error bag to read from.``` ``` --- #### `x-form-error-list` [](#x-form-error-list) Renders all validation errors from an error bag as an unordered list. Useful at the top of a form to summarise every failure. PropTypeDefaultDescription`bag``string``'default'`The error bag to read from.``` Save ``` --- Behaviours ---------- [](#behaviours) ### Old input repopulation [](#old-input-repopulation) After a failed form submission, `x-form-input`, `x-form-textarea`, `x-form-select`, `x-form-checkbox`, and `x-form-radio` automatically call `old()` to restore the user's previous input. You do not need to write `:value="old('field', $default)"` manually. `x-form-checkbox` handles the unchecked case correctly - HTML forms do not include unchecked checkboxes in the submission, so the component checks `session()->hasOldInput()` before deciding whether to restore state. ### Automatic error display [](#automatic-error-display) Input components render an `` for their field by default. To suppress it for a specific field, pass `:show-error="false"`: ``` ``` Use `` to render all errors in one place at the top of the form instead. ### Method spoofing and CSRF [](#method-spoofing-and-csrf) `` outputs a CSRF token on every state-changing form (anything other than `GET`, `HEAD`, or `OPTIONS`). When `method` is `PUT`, `PATCH`, or `DELETE`, it also outputs a hidden `_method` field and sets the ``, conforming to [Laravel's method spoofing](https://laravel.com/docs/routing#form-method-spoofing): ``` {{-- Renders: --}} Delete account ``` ### Array field names and dot notation [](#array-field-names-and-dot-notation) Field names written in array notation (e.g. `items[0][name]`) are automatically converted to dot notation (`items.0.name`) when looking up validation errors and old input. This means standard Laravel validation error keys work correctly for array fields: ``` @foreach ($items as $index => $item) @endforeach ``` Validation errors keyed as `items.0.name`, `items.1.name`, etc. will appear next to the correct field. Testing ------- [](#testing) ``` composer test # PHPUnit + PHPStan composer test:phpunit # PHPUnit only composer test:phpstan # PHPStan static analysis composer pint # check/fix code style ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Adz Chappers](https://github.com/adzchappers) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 41 — FairBetter than 87% of packages Maintenance97 Actively maintained with recent releases Popularity4 Limited adoption so far Community7 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~16 days Total 3 Last Release 24d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/611127?v=4)[Adam](/maintainers/adzchappers)[@adzchappers](https://github.com/adzchappers) --- Top Contributors [![adzchappers](https://avatars.githubusercontent.com/u/611127?v=4)](https://github.com/adzchappers "adzchappers (7 commits)") --- Tags laravelbladeformFormsblade-componentslaravel-form-componentsform-componentslaravel-blade-componentsadzchappers ### Code Quality TestsPHPUnit Static AnalysisPHPStan Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/adzchappers-blade-components/health.svg) ``` [![Health](https://phpackages.com/badges/adzchappers-blade-components/health.svg)](https://phpackages.com/packages/adzchappers-blade-components) ``` ### Alternatives [hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5443.8k](/packages/hasinhayder-tyro-dashboard)[technikermathe/blade-lucide-icons A package to easily make use of Lucide icons in your Laravel Blade views. 18421.4k11](/packages/technikermathe-blade-lucide-icons)[hasinhayder/tyro-login Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13 2484.9k6](/packages/hasinhayder-tyro-login)[ublabs/blade-simple-icons A package to easily make use of Simple Icons in your Laravel Blade views. 1963.4k](/packages/ublabs-blade-simple-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)