Posts Learn Components Snippets Categories Tags About
/

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

196 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 🚀
Laravel Nova Color Swatch Field

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.
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.
Tailwind CSS Basic Card Component

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. 🍻

Resources

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for How to Add Color Picker Field to Laravel Nova

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More