Accent Color

Set accent color for form controls

Syntax

visual="accent:[color]"

Examples

<input type="checkbox" visual="accent:primary">

Preview

Accent Color

visual="accent:primary" - Style native form controls (checkboxes, radios, range)

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <input type="checkbox" checked visual="accent:primary w:[20px] h:[20px]">
  <input type="radio" checked visual="accent:success w:[20px] h:[20px]">
  <input type="range" visual="accent:secondary w:[100px]">
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="accent:[custom-value]">Custom</div>