Color Field

The color field stores a controlled color value inside a repeater row.

Best For

• badge colors
• accent swatches
• chart legend values
• simple per-item visual tokens

Schema Example

{ "name": "accentColor", "label": "Accent Color", "type": "color" }

Template Usage

{{#each stats as="item"}}
  <span class="stat-dot" style="background-color: {{ item.accentColor }};"></span>
{{/each}}

Variant example:

{{#each badges as="item"}}
  <span class="badge" style="border-color: {{ item.accentColor }};">
    {{ item.label }}
  </span>
{{/each}}

Use It When

Use color when each repeated item needs a lightweight visual value that editors can control safely.

Do Not Use It When

Do not use color when:

• the color should be enforced globally by design tokens
• the value should be chosen from a small named set instead of a free color input

Use select or a shared styling system instead.

Technical Notes

• keep color inside controlled repeated structures, not as a substitute for global design tokens
• use it when item-level variation is intentional and limited
• prefer named variants through select when consistency matters more than free color choice
• review accessibility impact before relying on color alone to convey meaning

Related

• Repeater
• Select
• Range