> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/nc/forms/radio-buttons/color-swatches.md).

# Color Swatches

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FLvzyMC3dNqy49yrZpXWK%2Fimage.png?alt=media&amp;token=8224f7d4-8d12-4e87-ae07-74e21854a756" alt=""><figcaption></figcaption></figure>

```html
<div role="listitem" class="radio-button-size w-dyn-item">
  <label 
    data-wf--filter-color-swatch--variant="100-circular"
    class="cc-radio-element w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5"
  >
    <input 
      type="radio"
      name="color"
      class="input w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5 color-radio"
      style="background-color: #ff3000;"
      fs-list-value="red"
      group="color"
      fs-list-field="color"
      title="Red"
      data-gtm-form-interact-field-id="0"
    >
  </label>
</div>
```

Image version

```
<label 
  data-wf--filter-color-swatch--variant="100-circular"
  class="cc-radio-element w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5"
>
  <img 
    src="https://cdn.prod.website-files.com/6456cd6f09c374a35490d289/65369a52a204f0002d71e0be_close_icon.svg" 
    loading="lazy" 
    alt="" 
    class="image"
  >
  <input 
    type="radio"
    name="color"
    class="input w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5 color-radio"
    style=""
    fs-list-value=""
    group="color"
    fs-list-field="color"
    title=""
    data-gtm-form-interact-field-id="3"
  >
</label>
```

```
<style>
input.color-radio {

  /* Reset native appearance */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;

  /* Custom style */
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
  display: inline-block;
}

/* Style when selected */
input.color-radio:checked {
  border: 3px solid black;
  box-shadow: 0 0 0 2px white inset;
}

</style>
```