K
KoreUI

Color Picker

Form

Selector de colores basado en paleta con modos dropdown e inline, input hex personalizado, clearable y binding con wire:model.

Uso básico

<x-kore::color-picker wire:model="color" label="Color" />
<x-kore::color-picker wire:model="color" label="Color" />

Modo inline

Muestra la paleta directamente sin dropdown.

<x-kore::color-picker wire:model="color" label="Color" inline />
<x-kore::color-picker wire:model="color" label="Color" inline />

Paleta personalizada

Pasa un array de colores hex y define el número de columnas.

<x-kore::color-picker
    :colors="['#1a1a2e', '#16213e', '#0f3460', '#e94560']"
    :columns="4"
    label="Tema"
    inline
/>
<x-kore::color-picker
    :colors="['#1a1a2e', '#16213e', '#0f3460', '#e94560']"
    :columns="4"
    label="Tema"
    inline
/>

Tamaños

Tres tamaños disponibles. El tamaño de los swatches escala proporcionalmente.

<x-kore::color-picker label="Small" size="sm" />
<x-kore::color-picker label="Medium" size="md" />
<x-kore::color-picker label="Large" size="lg" />
<x-kore::color-picker label="Small" size="sm" />
<x-kore::color-picker label="Medium" size="md" />
<x-kore::color-picker label="Large" size="lg" />

Estados

Disabled, required y error.

<x-kore::color-picker label="Disabled" disabled />
<x-kore::color-picker label="Required" required />
<x-kore::color-picker label="Con error" error="Selecciona un color" />
<x-kore::color-picker label="Disabled" disabled />
<x-kore::color-picker label="Required" required />
<x-kore::color-picker label="Con error" error="Selecciona un color" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del campo
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
size string md Tamaño: sm, md, lg
colors array|null 24 colores curados Paleta personalizada (array de strings hex)
allowCustom bool true Mostrar input hex para colores personalizados
inline bool false Mostrar paleta inline (sin dropdown)
clearable bool true Permitir limpiar el color seleccionado
columns int 8 Número de columnas en la cuadrícula de swatches
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag

Configuración

Defaults globales en config/kore-ui.php.

config/kore-ui.php 
'form' => [
    'color_picker' => [
        'columns' => 8,
        'allow_custom' => true,
    ],
],
'form' => [
    'color_picker' => [
        'columns' => 8,
        'allow_custom' => true,
    ],
],