K
KoreUI

Select

Form

Select personalizado con busqueda, multi-seleccion con chips, agrupado, creatable y navegacion por teclado.

Uso basico

Select personalizado (por defecto) con opciones simples.

<x-kore::select label="Fruta" placeholder="Selecciona una fruta"
    :options="['Manzana', 'Naranja', 'Platano']" />
<x-kore::select label="Fruta" placeholder="Selecciona una fruta"
    :options="['Manzana', 'Naranja', 'Platano']" />

Select nativo

Usa el elemento HTML nativo <select>.

<x-kore::select label="Estado" native placeholder="Selecciona..."
    :options="['active' => 'Activo', 'inactive' => 'Inactivo', 'pending' => 'Pendiente']" />
<x-kore::select label="Estado" native placeholder="Selecciona..."
    :options="['active' => 'Activo', 'inactive' => 'Inactivo', 'pending' => 'Pendiente']" />

Searchable

Filtrado en el cliente por texto de la opcion.

<x-kore::select label="Pais" placeholder="Busca un pais..."
    :options="[
        ['value' => 'mx', 'label' => 'Mexico'],
        ['value' => 'us', 'label' => 'Estados Unidos'],
        ['value' => 'es', 'label' => 'Espana'],
        ['value' => 'ar', 'label' => 'Argentina'],
        ['value' => 'co', 'label' => 'Colombia'],
    ]"
    searchable clearable />
<x-kore::select label="Pais" placeholder="Busca un pais..."
    :options="[
        ['value' => 'mx', 'label' => 'Mexico'],
        ['value' => 'us', 'label' => 'Estados Unidos'],
        ['value' => 'es', 'label' => 'Espana'],
        ['value' => 'ar', 'label' => 'Argentina'],
        ['value' => 'co', 'label' => 'Colombia'],
    ]"
    searchable clearable />

Multi-select

Los valores seleccionados se muestran como chips. Remueve con la X de cada chip.

<x-kore::select label="Tags" placeholder="Selecciona tags..."
    :options="[
        ['value' => 'laravel', 'label' => 'Laravel'],
        ['value' => 'vue', 'label' => 'Vue.js'],
        ['value' => 'tailwind', 'label' => 'Tailwind'],
        ['value' => 'alpine', 'label' => 'Alpine.js'],
        ['value' => 'livewire', 'label' => 'Livewire'],
    ]"
    multiple searchable :max="3" />
<x-kore::select label="Tags" placeholder="Selecciona tags..."
    :options="[
        ['value' => 'laravel', 'label' => 'Laravel'],
        ['value' => 'vue', 'label' => 'Vue.js'],
        ['value' => 'tailwind', 'label' => 'Tailwind'],
        ['value' => 'alpine', 'label' => 'Alpine.js'],
        ['value' => 'livewire', 'label' => 'Livewire'],
    ]"
    multiple searchable :max="3" />

Clearable

Muestra un boton para limpiar la seleccion.

<x-kore::select label="Color" placeholder="Selecciona un color"
    :options="['Rojo', 'Verde', 'Azul']"
    clearable />
<x-kore::select label="Color" placeholder="Selecciona un color"
    :options="['Rojo', 'Verde', 'Azul']"
    clearable />

Creatable

Permite crear nuevas opciones escribiendo un valor que no existe en la lista. Searchable se habilita automaticamente.

<x-kore::select label="Framework" placeholder="Selecciona o crea..."
    :options="[
        ['value' => 'laravel', 'label' => 'Laravel'],
        ['value' => 'django', 'label' => 'Django'],
        ['value' => 'rails', 'label' => 'Rails'],
    ]"
    creatable clearable />
<x-kore::select label="Framework" placeholder="Selecciona o crea..."
    :options="[
        ['value' => 'laravel', 'label' => 'Laravel'],
        ['value' => 'django', 'label' => 'Django'],
        ['value' => 'rails', 'label' => 'Rails'],
    ]"
    creatable clearable />

Agrupado (nativo)

Opciones agrupadas con optgroup. Solo disponible en modo nativo.

<x-kore::select label="Ciudad" grouped native placeholder="Selecciona..."
    :options="[
        'Norte' => ['mty' => 'Monterrey', 'chih' => 'Chihuahua'],
        'Centro' => ['cdmx' => 'CDMX', 'gdl' => 'Guadalajara'],
    ]" />
<x-kore::select label="Ciudad" grouped native placeholder="Selecciona..."
    :options="[
        'Norte' => ['mty' => 'Monterrey', 'chih' => 'Chihuahua'],
        'Centro' => ['cdmx' => 'CDMX', 'gdl' => 'Guadalajara'],
    ]" />

Tamanos

Tres tamanos disponibles.

<x-kore::select label="Small" size="sm" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="sm" />
<x-kore::select label="Medium" size="md" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="md" />
<x-kore::select label="Large" size="lg" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="lg" />
<x-kore::select label="Small" size="sm" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="sm" />
<x-kore::select label="Medium" size="md" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="md" />
<x-kore::select label="Large" size="lg" :options="['Opcion 1', 'Opcion 2', 'Opcion 3']" placeholder="lg" />

Estados

Disabled, required y error.

<x-kore::select label="Disabled" disabled :options="['Opcion 1', 'Opcion 2']" placeholder="No disponible" />
<x-kore::select label="Required" required :options="['Opcion 1', 'Opcion 2']" placeholder="Obligatorio" />
<x-kore::select label="Con error" error="Selecciona una opcion" :options="['Opcion 1', 'Opcion 2']" placeholder="Selecciona..." />
<x-kore::select label="Disabled" disabled :options="['Opcion 1', 'Opcion 2']" placeholder="No disponible" />
<x-kore::select label="Required" required :options="['Opcion 1', 'Opcion 2']" placeholder="Obligatorio" />
<x-kore::select label="Con error" error="Selecciona una opcion" :options="['Opcion 1', 'Opcion 2']" placeholder="Selecciona..." />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda
name string|null null Nombre para deteccion de errores
error string|null null Mensaje de error manual
size string md Tamano: sm, md, lg
options array [] Array de opciones
optionLabel string label Clave para el texto visible de la opcion
optionValue string value Clave para el valor de la opcion
optionDescription string|null null Clave para texto secundario de la opcion
optionImage string|null null Clave para URL de imagen de la opcion
placeholder string|null null Texto placeholder
searchable bool false Habilitar busqueda/filtrado
clearable bool false Mostrar boton de limpiar
multiple bool false Multi-seleccion con chips
max int|null null Maximo de selecciones (solo multi)
native bool false Usar elemento <select> nativo
grouped bool false Opciones agrupadas (solo nativo)
creatable bool false Permitir crear opciones nuevas
async string|null null URL para busqueda remota
debounce int 300 Debounce para busqueda async (ms)
minSearch int 2 Caracteres minimos antes de disparar async
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag