mrshanebarron/select

Select dropdown component for Laravel - supports Livewire and Vue

v1.0.1 2025-12-15 23:45 UTC

Requires

• php: ^8.1
• illuminate/support: ^10.0|^11.0|^12.0

MIT

• Shane Barron

• form
• laravel
• select
• dropdown
• vue
• livewire

README

A custom select dropdown component for Laravel applications. Supports search, multi-select, and custom styling. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/select

Livewire Usage

Basic Usage

<livewire:sb-select
    wire:model="country"
    :options="['us' => 'United States', 'ca' => 'Canada', 'mx' => 'Mexico']"
/>

With Placeholder

<livewire:sb-select
    wire:model="status"
    :options="$statuses"
    placeholder="Select a status"
/>

Searchable

<livewire:sb-select
    wire:model="country"
    :options="$countries"
    :searchable="true"
    placeholder="Search countries..."
/>

Multi-select

<livewire:sb-select
    wire:model="tags"
    :options="$availableTags"
    :multiple="true"
    placeholder="Select tags"
/>

Livewire Props

Prop	Type	Default	Description
wire:model	mixed	null	Selected value(s)
options	array	required	Key-value options
placeholder	string	'Select an option'	Placeholder text
searchable	boolean	false	Enable search
multiple	boolean	false	Allow multiple selections
disabled	boolean	false	Disable select

Vue 3 Usage

Setup

import { SbSelect } from './vendor/sb-select';
app.component('SbSelect', SbSelect);

Basic Usage

<template>
  <SbSelect v-model="selected" :options="options" />
</template>

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

const selected = ref(null);
const options = {
  draft: 'Draft',
  published: 'Published',
  archived: 'Archived'
};
</script>

With Placeholder

<template>
  <SbSelect
    v-model="selected"
    :options="options"
    placeholder="Choose a status..."
  />
</template>

Searchable

<template>
  <SbSelect
    v-model="country"
    :options="countries"
    searchable
    placeholder="Search countries..."
  />
</template>

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

const country = ref(null);
const countries = {
  us: 'United States',
  ca: 'Canada',
  uk: 'United Kingdom',
  de: 'Germany',
  fr: 'France',
  // ... more countries
};
</script>

Multi-select

<template>
  <SbSelect
    v-model="selectedTags"
    :options="tags"
    multiple
    placeholder="Select tags"
  />
  <p>Selected: {{ selectedTags }}</p>
</template>

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

const selectedTags = ref([]);
const tags = {
  frontend: 'Frontend',
  backend: 'Backend',
  design: 'Design',
  devops: 'DevOps'
};
</script>

Form Example

<template>
  <form @submit.prevent="submit" class="space-y-4">
    <div>
      <label class="block text-sm font-medium mb-1">Category</label>
      <SbSelect
        v-model="form.category"
        :options="categories"
        placeholder="Select category"
      />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Tags</label>
      <SbSelect
        v-model="form.tags"
        :options="tags"
        multiple
        searchable
        placeholder="Select tags"
      />
    </div>

    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">
      Save
    </button>
  </form>
</template>

Vue Props

Prop	Type	Default	Description
modelValue	Any	null	Selected value(s)
options	Object	required	{ value: 'Label' } pairs
placeholder	String	'Select an option'	Placeholder text
searchable	Boolean	false	Enable filtering
multiple	Boolean	false	Multi-select mode
disabled	Boolean	false	Disable interaction

Events

Event	Payload	Description
update:modelValue	any	Emitted when selection changes

Features

• Custom Styling: Matches form design
• Searchable: Filter options by typing
• Multi-select: Select multiple values
• Checkmarks: Visual selection indicators
• Keyboard Navigation: Escape to close
• Click Outside: Closes on outside click

Options Format

// Object format (value => label)
const options = {
  draft: 'Draft',
  published: 'Published',
  archived: 'Archived'
};

Multi-select Values

When multiple is true, the model value is an array:

// Single select
const selected = ref('draft'); // string

// Multi-select
const selected = ref(['frontend', 'backend']); // array

Styling

Uses Tailwind CSS:

• White background with border
• Blue ring on focus
• Checkmark for selected items
• Hover highlight
• Disabled opacity

Requirements

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

License

MIT License