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.