# colorPreview

> Live-updates a ColorField's paired swatch preview as the person typing into its text control lands on a value the chosen color notation actually accepts, reflecting every keystroke a script can observe that no CSS selector or HTML attribute can react to on its own.

```ts
import { colorPreview } from "@sdxc/ui/mixins";
```

Live-updates a ColorField's paired swatch preview as its text control's
value changes, running each `input` event's value through `parseColor()`
and writing successful parses onto the swatch found via findSwatch.

## Signature

```ts
colorPreview(): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for a ColorField wrapping host's `mix` prop.

## Examples

```tsx
<div mix={colorPreview()}>
  <input
    type="text"
    pattern="#[0-9a-fA-F]{6}"
    defaultValue="#3b82f6"
    aria-label={t("colorField.label")}
  />
  <ColorSwatch value="#3b82f6" />
</div>
```