pezhooman / livewire-tree-select

v1.0.6 2026-09-15 11:55 UTC

Requires

• php: ^8.2
• illuminate/support: ^11.0|^12.0
• livewire/livewire: ^4.0

MIT

Published on Packagist.org on 2026-09-15 11:52 UTC

README

Reusable recursive multi-select tree component for Laravel + Livewire 4.

Requirements

• PHP 8.2+
• Laravel 11 or 12
• Livewire 4
• Bootstrap is optional
• Font Awesome is optional; the default markup uses Font Awesome classes

Installation

composer require pezhooman/livewire-tree-select

Laravel package discovery registers the service provider automatically.

Usage

<livewire:tree-select::tree-select
    :items="$this->radehs"
    wire:model="selectedRadehs"
    id-column="id"
    label-column="radehName"
    children-relation="children"
/>

The parent component:

public array $selectedRadehs = [];

The component returns selected IDs through wire:model.

Generic example

$categories = Category::with('children')->get();

public array $selectedCategories = [];

<livewire:tree-select::tree-select
    :items="$categories"
    wire:model="selectedCategories"
    id-column="id"
    label-column="name"
    children-relation="children"
/>

Expand all

<livewire:tree-select::tree-select
    :items="$items"
    wire:model="selected"
    id-column="id"
    label-column="name"
    children-relation="children"
    :expand-all="true"
/>

Behavior

• Selecting a parent selects the parent and every descendant.
• Removing one descendant changes the parent to an indeterminate - state.
• Selecting all descendants makes the parent checked.
• Clicking an indeterminate parent selects the complete branch.
• Clicking a fully selected parent clears the complete branch.
• The component accepts arrays, Laravel Collections, Eloquent Collections, and traversable values.
• No application model is required.

Font Awesome

The component uses classes such as:

fa-duotone fa-chevron-left
fa-duotone fa-folder-tree
fa-duotone fa-file
fa-solid fa-check
fa-solid fa-minus

If Font Awesome is not available, replace those icons in the partial with your preferred icon system.

Local development

Clone the package and use a Composer path repository from the application:

"repositories": [
    {
        "type": "path",
        "url": "../livewire-tree-select"
    }
]

Then:

composer require pezhooman/livewire-tree-select:@dev

Publishing

The package is designed to be published to GitHub/Gitea and then submitted to Packagist.

License

MIT