Country State Dependent Select Box Livewire
Bootstrap 5 New Livewire
Demo
This is a pro component. Get Livewiredemos pro access to view / download the component code.
Component Class
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use CountryState;
class CountryStateSelect extends Component
{
public array $countries;
public array $states = [];
public string $country = '';
public string $state = '';
public function render()
{
return view('livewire.country-state-select');
}
public function mount(){
$this->countries = CountryState::getCountries();
}
public function updatedCountry($value)
{
$this->state = '';
$this->states = CountryState::getStates($this->country);
}
}
Component View File
<div>
<div class="mb-3">
<label for="country" class="form-label" >Country</label>
<select class="form-select mb-3" aria-label="Country select box" wire:model="country">
<option selected>Select Country</option>
@foreach($countries as $countryKey => $countryValue)
<option value="{{$countryKey}}">{{$countryValue}}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label for="state" class="form-label">State</label>
<select class="form-select" aria-label="State select box" wire:model="state" wire:loading.attr="disabled" wire:target="country">
<option selected>Select State</option>
@foreach($states as $stateKey => $stateValue)
<option value="{{$stateKey}}">{{$stateValue}}</option>
@endforeach
</select>
</div>
</div>
Usage
@livewire('country-state-select')
Documentation
This livewire component uses DougSisk/laravel-country-state package to get the list of countries and states.
Install the package using composer
composer require dougsisk/laravel-country-state
Once the package is installed, you can make use of this livewire component to get teh list of country and states.
Download Code
Download the Component class, view file and other required files
This is a pro component. Get Livewiredemos pro access to view / download the component code.