README

A phone number input with country code selector for Laravel applications. Flag dropdown with dial codes. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/phone-input

Livewire Usage

Basic Usage

<livewire:sb-phone-input wire:model="phone" />

With Default Country

<livewire:sb-phone-input
    wire:model="phone"
    default-country="GB"
/>

Livewire Props

Vue 3 Usage

Setup

import { SbPhoneInput } from './vendor/sb-phone-input';
app.component('SbPhoneInput', SbPhoneInput);

Basic Usage

<template>
  <SbPhoneInput v-model="phone" />
  <p class="mt-2 text-sm text-gray-500">Full number: {{ phone }}</p>
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');
</script>

With Default Country

<template>
  <SbPhoneInput
    v-model="phone"
    default-country="GB"
    placeholder="Enter your mobile"
  />
</template>

Contact Form Example

<template>
  <form @submit.prevent="submit" class="space-y-4">
    <div>
      <label class="block text-sm font-medium mb-1">Name</label>
      <input v-model="form.name" class="w-full px-3 py-2 border rounded-lg" />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input v-model="form.email" type="email" class="w-full px-3 py-2 border rounded-lg" />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Phone</label>
      <SbPhoneInput v-model="form.phone" />
    </div>

    <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg">
      Submit
    </button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  name: '',
  email: '',
  phone: ''
});

const submit = () => {
  console.log('Submitting:', form);
};
</script>

Vue Props

Events

Included Countries

Features

• Country Selector: Dropdown with flags and dial codes
• Search Countries: Filter countries by name or code
• Flag Display: Emoji flags for each country
• Auto Format: Strips non-numeric characters
• Combined Output: Returns full number with dial code
• Click Outside: Closes dropdown on outside click

Styling

Uses Tailwind CSS:

• Country button with flag
• Dropdown with search
• Hover highlights
• Focus ring on input
• Rounded input group

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License