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