Hello Virla01,

Your codepen is only the frontend code but there isn't any serverside code that could save it.

Without that part it is not possible to see what the problem is :)

view/livewire/backend/articles/categories/edit.blade.php

            <form wire:submit.prevent="update">
                <div class="p-5 bg-white shadow sm:rounded-tl-md sm:rounded-tr-md">
                    <div class="flex w-full flex-col">
                        <div class="flex w-full flex-col md:flex-row mb-5 mt-5">
                            <label for="name" class="w-full md:w-3/12 text-sm font-medium text-gray-700 pb-2 md:pb-0 md:pr-4">{{ __('Name') }}</label>
                            <div class="w-full md:w-9/12">
                                <input type="text" wire:model.defer="name" placeholder="{{ __('Name') }}" class="block w-full input">
                            </div>
                            <x-jet-input-error for="name" class="flex w-full pl-24 mt-2.5"/>
                        </div>
                        <div class="flex w-full flex-col md:flex-row mb-5">
                            <label for="image" class="w-full md:w-3/12 text-sm font-medium text-gray-700 pb-2 md:pb-0 md:pr-4">{{ __('Image') }}</label>
                            <div class="black w-auto relative">
                                <input type="text" wire:model.defer="image" placeholder="{{ __('Image') }}" class="block w-full input">
                            </div>
                            <x-jet-input-error for="image" class="flex w-full pl-24 mt-2.5"/>
                        </div>
                        <div class="flex w-full flex-col md:flex-row mb-5">
                            <label for="color" class="w-full md:w-3/12 text-sm font-medium text-gray-700 pb-2 md:pb-0 md:pr-4">{{ __('Color') }}</label>
                            <div class="flex w-auto relative">
                                {{--  <input type="text" wire:model.defer="color" placeholder="{{ __('Color') }}" class="block w-full input">  --}}
                                <div x-data="appColor()" x-init="[initColor()]">
                                    <div>
                                        {{--  <label for="color-picker" class="block mb-1 font-semibold">Select a color</label>  --}}
                                        <div class="flex flex-row relative">
                                            <input type="text" class="input" x-model.defer="currentColor">
                                            <div @click="isOpen = !isOpen" class="cursor-pointer rounded-full ml-3 my-auto h-10 w-10 flex" :class="`bg-${currentColor}`">
                                                <svg xmlns="http://www.w3.org/2000/svg" :class="`${iconColor}`" class="h-6 w-6 mx-auto my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                                                </svg>
                                            </div>
                                            <div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform"
                                                x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                                                x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100"
                                                x-transition:leave-end="opacity-0 scale-95" class="border border-gray-300 origin-top-right absolute right-0 top-full mt-2 rounded-md shadow-lg" style="z-index: 999">
                                                <div class="rounded-md bg-white shadow-xs p-2">
                                                    <div class="flex">
                                                        <template x-for="color in colors">
                                                            <div class="">
                                                                <template x-for="variant in variants">
                                                                    <div @click="selectColor(color,variant)" class="cursor-pointer w-6 h-6 rounded-full mx-1 my-1" :class="`bg-${color}-${variant}`"></div>
                                                                </template>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <x-jet-input-error for="color" class="flex w-full pl-24 mt-2.5"/>
                        </div>

                        <div class="flex w-full flex-col md:flex-row mb-5">
                            <label for="description" class="w-full md:w-3/12 text-sm font-medium text-gray-700 pb-2 md:pb-0 md:pr-4">{{ __('Description') }}</label>
                            <div class="w-full md:w-9/12">
                                <textarea  wire:model.defer="description" name="description" id="description" rows="2" class="w-full input"></textarea>
                            </div>
                            <x-jet-input-error for="description" class="flex w-full pl-24 mt-2.5"/>
                        </div>
                        <div class="flex w-full flex-col md:flex-row mb-5 mt-5">
                            <label for="published" class="w-full md:w-3/12 text-sm font-medium text-gray-700 pb-2 md:pb-0 md:pr-4">{{ __('Published') }}</label>
                            <div class="black w-10 relative">
                                <input type="checkbox"
                                    name="published"
                                    wire:model.defer="published"
                                    class="toggle-checkbox absolute block w-5 h-5 top-0.5 rounded-full bg-white border-4 appearance-none cursor-pointer"
                                />
                                <label for="published" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                            <x-jet-input-error for="published" class="flex w-full pl-24 mt-2.5"/>
                        </div>
                        <div class="flex w-full border-t border-solid border-black border-opacity-20 pt-5 mt-5 justify-end">
                            <a href="{{ route('categories') }}" class="btn text-white bg-gray-400 hover:bg-gray-700"><i class="axs axs-undo mr-2"></i>Cancel</a>
                            <button type="submit" class="btn text-white bg-green-500 hover:bg-green-700 ml-2"><i class="axs axs-save mr-2"></i>Save</button>
                        </div>
                    </div>
                </div>
            </form>
			
			
    <script>
        window.appColor = () => {
            return {
                    colors: ['gray', 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'],
                    variants: [100, 200, 300, 400, 500, 600, 700, 800, 900],
                    currentColor: '',
                    iconColor: '',
                    isOpen: false,
                    initColor () {
                        this.currentColor = ''?'red-800':'{{$currentColor}}'
                        this.setIconWhite()
                    },
                    setIconWhite () {
                        this.iconColor = 'text-white'
                    },
                    setIconBlack () {
                        this.iconColor = 'text-black'
                    },
                    selectColor (color, variant) {
                        this.currentColor = color + '-' + variant
                        if (variant < 500) {
                                this.setIconBlack()
                        }
                        else {
                                this.setIconWhite()
                        }
                    }
            }
        }
    </script>

App\Http\Livewire\Backend\Articles\Categories\edit.php

<?php

namespace App\Http\Livewire\Backend\Articles\Categories;

use Livewire\Component;
use App\Models\Category;
use Illuminate\Support\Str;

class Edit extends Component
{

    public $categories;
    public $category;
    public $name, $slug, $description, $color, $currentColor, $image, $published = false, $trash;

    protected $rules = [
        'name' => 'required',
        'slug' => 'nullable',
        'description' => 'nullable',
        'currentColor' => 'nullable',
        'image' => 'nullable',
        'published' => 'boolean',
    ];

    public function mount($id)
    {

        $this->category = Category::findOrFail($id);
        $this->name =  $this->category->name;
        $this->slug =  $this->category->slug;
        $this->description =  $this->category->description;
        $this->currentColor =  $this->category->currentColor;
        $this->image =  $this->category->image;
        $this->published =  $this->category->published;

    }

    public function render()
    {
        return view('livewire.backend.articles.categories.edit')->layout('layouts.back');
    }

    public function update()
    {
        $category = Category::findOrFail($this->category->id);

        dd($this->currentColor);

        $this->validate();

        $category->update([
            'name' => $this->name,
            'slug' => Str::slug($this->name),
            'description' => $this->description,
            'currentColor' => $this->currentColor,
            'image' => $this->image,
            'published' => $this->published,
        ]);

        session()->flash("message", trans('articles.category-edited-successfully') );

        return redirect(route('categories'));
    }
}