{"id":13423008,"url":"https://github.com/asantibanez/livewire-select","last_synced_at":"2026-01-11T13:43:01.625Z","repository":{"id":38073031,"uuid":"269208972","full_name":"asantibanez/livewire-select","owner":"asantibanez","description":"Livewire component for dependant and/or searchable select inputs","archived":false,"fork":false,"pushed_at":"2025-03-14T15:57:35.000Z","size":2228,"stargazers_count":512,"open_issues_count":27,"forks_count":103,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-14T16:41:37.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/asantibanez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2020-06-03T22:37:21.000Z","updated_at":"2025-03-14T15:57:41.000Z","dependencies_parsed_at":"2024-06-18T14:45:47.297Z","dependency_job_id":"7e298b80-9672-4ac6-b277-98491b1ed6d0","html_url":"https://github.com/asantibanez/livewire-select","commit_stats":{"total_commits":33,"total_committers":3,"mean_commits":11.0,"dds":0.06060606060606055,"last_synced_commit":"4d971541e2347806b58b8583f982bb378ff5f883"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asantibanez","download_url":"https://codeload.github.com/asantibanez/livewire-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243615474,"owners_count":20319727,"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-07-30T23:01:05.225Z","updated_at":"2026-01-11T13:43:01.584Z","avatar_url":"https://github.com/asantibanez.png","language":"PHP","funding_links":[],"categories":["Forms","Packages / Plugins"],"sub_categories":[],"readme":"# Livewire Select\n\nLivewire component for dependant and/or searchable select inputs\n\n### Preview\n\n![preview](https://github.com/asantibanez/livewire-select/raw/master/preview.gif) \n\n### Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require asantibanez/livewire-select\n```\n\n### Requirements\n\nThis package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood.\n\nIt also uses TailwindCSS (https://tailwindcss.com/) for base styling. \n\nPlease make sure you include both of these dependencies before using this component. \n\n### Usage\n\nIn order to use this component, you must create a new Livewire component that extends from \n`LivewireSelect`\n\nYou can use `make:livewire` to create a new component. For example.\n``` bash\nphp artisan make:livewire CarModelSelect\n```\n\nIn the `CarModelSelect` class, instead of extending from the base Livewire `Component` class, \nextend from `LivewireSelect` class. Also, remove the `render` method. \nYou'll have a class similar to this snippet.\n \n``` php\nclass CarModelSelect extends LivewireSelect\n{\n    //\n}\n```\n\nIn this class, you must override the following methods to provide options for your select input\n```php\npublic function options($searchTerm = null) : Collection \n{\n    //\n}\n```\n\n`options()` must return a collection of keyed values array items that must have at least the following \nkeys: `value` and `description`. For example:\n\n```php\npublic function options($searchTerm = null) : Collection \n{\n    return collect([\n        [\n            'value' =\u003e 'honda',\n            'description' =\u003e 'Honda',\n        ],\n        [\n            'value' =\u003e 'mazda',\n            'description' =\u003e 'Mazda',\n        ],\n        [\n            'value' =\u003e 'tesla',\n            'description' =\u003e 'Tesla',\n        ],       \n    ]);\n}\n```\n\nTo render the component in a view, just use the Livewire tag or include syntax\n \n ```blade\n \u003clivewire:car-brand-select\n    name=\"car_brand_id\"\n    :value=\"$initialValue\" // optional\n    placeholder=\"Choose a Car Brand\" // optional\n /\u003e\n ```\n\nYou'll see on screen a select input with some custom styles with your defined values\n\n![preview](https://github.com/asantibanez/livewire-select/raw/master/basic.gif)\n\nNothing fancy there. Now, let's make another select input depend on its value.\n\nCreate another component following the same process above. In this case, we will create \na `CarModelSelect` with the following `options()` method.\n\n```php\n// In CarModelSelect component\npublic function options($searchTerm = null) : Collection \n{\n    $modelsByBrand = [\n        'tesla' =\u003e [\n            ['value' =\u003e 'Model S', 'description' =\u003e 'Model S'],\n            ['value' =\u003e 'Model 3', 'description' =\u003e 'Model 3'],\n            ['value' =\u003e 'Model X', 'description' =\u003e 'Model X'],\n        ],\n        'honda' =\u003e [\n            ['value' =\u003e 'CRV', 'description' =\u003e 'CRV'],\n            ['value' =\u003e 'Pilot', 'description' =\u003e 'Pilot'],\n        ],\n        'mazda' =\u003e [\n            ['value' =\u003e 'CX-3', 'description' =\u003e 'CX-3'],\n            ['value' =\u003e 'CX-5', 'description' =\u003e 'CX-5'],\n            ['value' =\u003e 'CX-9', 'description' =\u003e 'CX-9'],\n        ],\n    ];\n\n    $carBrandId = $this-\u003egetDependingValue('car_brand_id');\n\n    if ($this-\u003ehasDependency('car_brand_id') \u0026\u0026 $carBrandId != null) {\n        return collect(data_get($modelsByBrand, $carBrandId, []));\n    }\n\n    return collect([\n        ['value' =\u003e 'Model S', 'description' =\u003e 'Tesla - Model S'],\n        ['value' =\u003e 'Model 3', 'description' =\u003e 'Tesla - Model 3'],\n        ['value' =\u003e 'Model X', 'description' =\u003e 'Tesla - Model X'],\n        ['value' =\u003e 'CRV', 'description' =\u003e 'Honda - CRV'],\n        ['value' =\u003e 'Pilot', 'description' =\u003e 'Honda - Pilot'],\n        ['value' =\u003e 'CX-3', 'description' =\u003e 'Mazda - CX-3'],\n        ['value' =\u003e 'CX-5', 'description' =\u003e 'Mazda - CX-5'],\n        ['value' =\u003e 'CX-9', 'description' =\u003e 'Mazda - CX-9'],\n    ]);\n} \n```\n\nand define it in the view like this\n\n```blade\n\u003clivewire:car-model-select\n    name=\"car_model_id\"\n    placeholder=\"Choose a Car Model\"\n    :depends-on=\"['car_brand_id']\"\n/\u003e\n```\n\nWith these two snippets we have defined a select input that `depends-on` another\nselect input with name `car_brand_id`. With this definition, we tell our component\nto listen to any updates on our `car_brand_id` input and be notified on changes.\n\n![preview](https://github.com/asantibanez/livewire-select/raw/master/dependant.gif)\n\nNotice in the `options()` method the use of two other helper methods: \n`getDependingValue` and `hasDependency`. \n\n`getDependingValue('token')` will return the value of another field, in this case \n`car_brand_id`. If `car_brand_id` has no value, then it will return `null`.\n\n`hasDependency('token')` allows us to check if our component has been specified\nto depend on other component values. This allows us to reuse the component by checking\nif a dependency has been specified in our layouts. \n\nFor example if we define the same component without the `:depends-on` attribute,\nwe can use the component and return all car models.\n\n```blade\n\u003clivewire:car-model-select\n    name=\"car_model_id\"\n    placeholder=\"Choose a Car Model\"\n/\u003e\n```\n\nIt should look something like this\n\n![preview](https://github.com/asantibanez/livewire-select/raw/master/no-dependency.gif)\n\n### Searchable inputs\n\nYou can define the `searchable` attribute on the component to change the behavior of your\ninputs. With `:searchable=\"true\"` your component will change its behavior to allow searching\nthe options returned in the `options()` method.\n\n ```blade\n\u003clivewire:car-model-select\n    name=\"car_model_id\"\n    placeholder=\"Choose a Car Model\"\n    :searchable=\"true\"\n/\u003e\n```\n\nYour input will look something like this\n\n![preview](https://github.com/asantibanez/livewire-select/raw/master/searchable.gif)\n\nTo filter the options in the dropdown, you can use the `$searchTerm` parameter in the \n`options()` method.\n\n### Customizing the UI\n\n// TODO 😬\n\n### Advanced behavior\n\n// TODO 😬\n\n### AlpineJs support\n\nAdd AlpineJs for arrow-keys navigation, enter key for selection, enter/space keys for reset. 😎\n\n### Testing\n\n``` bash\ncomposer test\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 santibanez.andres@gmail.com instead of using the issue tracker.\n\n## Credits\n\n- [Andrés Santibáñez](https://github.com/asantibanez)\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%2Fasantibanez%2Flivewire-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasantibanez%2Flivewire-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasantibanez%2Flivewire-select/lists"}