PHPackages                             nickford/acf-swatch - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nickford/acf-swatch

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

nickford/acf-swatch
===================

This is a simple ACF Add-on field allowing the creation of color swatches that behave as radio buttons.

1.0.7(7y ago)7610.2k—6.7%10[4 issues](https://github.com/nickforddesign/acf-swatch/issues)[2 PRs](https://github.com/nickforddesign/acf-swatch/pulls)1MITPHP

Since Oct 23Pushed 5y ago4 watchersCompare

[ Source](https://github.com/nickforddesign/acf-swatch)[ Packagist](https://packagist.org/packages/nickford/acf-swatch)[ RSS](/packages/nickford-acf-swatch/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (5)Used By (1)

ACF - Color Swatch field add-on
===============================

[](#acf---color-swatch-field-add-on)

- **Author:** Nick Ford
- **Tags:** acf, acf add-on, color, color swatch, color swatches
- **Requires at least:** 4.0
- **Tested up to:** 5

License: [GPLv2](http://www.gnu.org/licenses/gpl-2.0.html) or later

Description
-----------

[](#description)

This is a simple ACF Add-on field allowing the creation of color swatches that behave as radio buttons. This is particularly useful if you want to limit the color options available to the end users, instead of using a color picker field.

This is an add-on for the [Advanced Custom Fields](http://wordpress.org/extend/plugins/advanced-custom-fields/)WordPress plugin and will not provide any functionality to WordPress unless Advanced Custom Fields is installed and activated.

The color swatch field is a radio button field, with a few modifications. The syntax for building the choices is the same as a radio button field, in that you may include a key : value pair, or just a single value, each option separated by a line break.

The field expects each line to be a color string, and can interpret all of the possible color formats.

For example, all of the following will produce a bright red swatch:

- `red`
- `#ff0000`
- `rgb(255,0,0)`
- `rgba(255,0,0, 1)`
- `hsl(0,100%,50%)`
- `hsla(0,100%,50%, 1)`

Additionally, if you are using rgb/rgba or hsl/hsla, you may use only the values, if desired. For instance:

- `255,0,0, 1 // will be recognized as rgba`
- `0,100%,50% // will be recognized as hsl`

This may be useful for defining CSS linear-gradients, or other situations where you may want to alter some of the values in the view.

Note that while the field can recognize these shortened syntaxes to display the color swatch in the Wordpress back end, it will still output only what you entered when using `the_field()` or `get_field()`.

Screenshots
===========

[](#screenshots)

[![Choices Field](/images/choices.png?raw=true)](/images/choices.png?raw=true)

[![Color Swatches](/images/swatches.png?raw=true)](/images/swatches.png?raw=true)

Installation
============

[](#installation)

### Wordpress Plugin Store

[](#wordpress-plugin-store)

---

### Composer

[](#composer)

---

If using Composer (e.g. with [Bedrock](https://roots.io/bedrock/))

- Add repo to `composer.json`:

```
"repositories": [
  {
    "type": "git",
    "url": "https://github.com/nickforddesign/acf-swatch"
  }
]
```

- Install using composer `composer require nickford/acf-swatch`

### Manual

[](#manual)

---

- Clone the repository to /wp-content/plugins/ in your Wordpress installation
- Activate in the Plugins manager.

Suggested Usage
===============

[](#suggested-usage)

Assuming you select a swatch with value `"rgba(255,0,0, 1)"`:

As inline CSS:

```