How to Add Color Picker Field to Laravel Nova

Learn how to add a Color picker/swatch field to Laravel Nova. Make use of this color picker field to make something amazing with your content.

Created on Sep 10, 2021

•

2164 views

In this snippet, you will learn how to add a color picker/swatch field to Laravel Nova resource. To accomplish this, we'll be using a package called nova-swatches by ynacorp so let's get started and build something cool with it 🚀

Step 1: Install Laravel Nova Swatches

Firstly you will have to install nova-swatches using the composer package manager and publish the configuration file.

composer require ynacorp/nova-swatches

The configuration file can be published by running the command below.

php artisan vendor:publish --tag=config --provider=Yna\\NovaSwatches\\FieldServiceProvider

Step 2: Call the Field in Nova Resource

For this example imagine you have a Nova resource called "Post" and for each of the posts you have a unique column called "color" that will store the HEX color code. Below is the database column definition.

id
title
body
color
created_at
updated_at

From the Nova post resource now you can call the "Swatches" field available from the package.

<?php // app/Nova/Post.php

use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Trix;
use Yna\NovaSwatches\Swatches;

public function fields(Request $request)
{
    return [
        ID::make(__('ID'), 'id')->sortable(),

        Text::make('Title')->rules('required'),
        
        Trix::make('Body'),

        Swatches::make('Color', 'color'),
    ];
}

If you have not created the Nova Resource, you can run the following command to generate it.

php artisan nova:resource Post

Below is the preview of the Nova Resource with Color Swatch Field.

Step 3: Nova Swatch Configuration

By default the swatch field has a basic configuration which only shows the color swatch, this can be updated to add other options from the config file located in "config/nova/swatches.php".

<?php // config/nova/swatches.php

return [
    /**
     * Props to pass to the vue-swatches component.
     *
     * See https://saintplay.github.io/vue-swatches/#sub-props
     */
    'props' => [
         'colors' => 'material-basic',
         'show-fallback' => true,
         'fallback-type' => 'input',
    ]
];

For this tutorial, we'll be using the one defined above but if you would like to define the other options you can visit the Vue Swatches documentation since under the hood it's using that library.

Step 4: Create Multiple Post With Different Color Accent and Render to Blade

Once you have created multiple posts with different color accents, now you can render the post from the Laravel blade and customize the post styling. For the code below, we'll be using PostSrc Basic Card Component.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
  <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden hover:shadow" style="min-height: 160px;">
	<div>
	  <div class="relative block h-full">
		<div class="h-32 bg-gray-100 rounded-lg"></div>
	  </div>
	</div>

	<h2 class="mt-4 text-gray-800 text-sm font-semibold line-clamp-1">
	  Card Title
	</h2>
  </div>

  <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden hover:shadow" style="min-height: 160px;">
	<div>
	  <div class="relative block h-full">
		<div class="h-32 bg-gray-100 rounded-lg"></div>
	  </div>
	</div>

	<h2 class="mt-4 text-gray-800 text-sm font-semibold line-clamp-1">
	  Card Title
	</h2>
  </div>

  <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden hover:shadow" style="min-height: 160px;">
	<div>
	  <div class="relative block h-full">
		<div class="h-32 bg-gray-100 rounded-lg"></div>
	  </div>
	</div>

	<h2 class="mt-4 text-gray-800 text-sm font-semibold line-clamp-1">
	  Card Title
	</h2>
  </div>
</div>

The preview of the card component is like below. Make sure to have Tailwind CSS installed or use the provided CDN to have the styling applied.

Now that you have copy the code you can create a new blade partially or just loop your $posts and apply the "color" swatch to make each post unique. For this example let's make each post have a different border color.

border: 2px solid {{ $post->color }}

The full blade code will be below. Do note that you can apply this to any of your resources and you can make use of this color to customize your different types of styling such as "card title", "card body", "card background-color" and etc.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
    @foreach($posts as $post)
        <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden hover:shadow" style="min-height: 160px; border: 2px solid {{ $post->color }}">
	    <div>
	        <div class="relative block h-full">
		    <div class="h-32 bg-gray-100 rounded-lg"></div>
	        </div>
	    </div>

	    <h2 class="mt-4 text-gray-800 text-sm font-semibold line-clamp-1">
                Card Title
	    </h2>
        </div>
    @endforeach
</div>

By now you should be able to add a Color picker/swatch to Laravel Nova and if you find this tutorial to be helpful, do make sure to share it with your friends, and cheers happy coding. 🍻