Color field

Example

<label for="color-field-accent">Accent color</label>
<input
	id="color-field-accent"
	type="color"
	name="accent"
	value="#2f6fde"
	data-slean="color-field"
/>

<script lang="ts">
	// Nothing to import: the browser owns the field. The stylesheet is optional.
	import '@svelte-lean/styles/color-field.css';

	let accent = $state('#2f6fde');
</script>

<label for="color-field-accent">Accent color</label>
<input
	id="color-field-accent"
	type="color"
	name="accent"
	bind:value={accent}
	data-slean="color-field"
/>

Why this implementation exists

A custom color picker is a large piece of interface: a saturation plane, a hue slider, text fields, and keyboard support for each. The platform ships one behind <input type="color">, keyboard-operable, with the value in one fixed format.

Svelte Lean draws the control as a swatch in a bordered box, through the swatch pseudo-elements, and leaves the picker to the browser.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/color-field.css';

Write value as #rrggbb. The value read back is always lowercase hex, whatever the picker showed.

The swatch shows the color, not its code. When the reader needs the code, bind the value and show it in an <output>.

Anatomy

Runtime profile

Tier 0: the field has no behavior module, and the Vite plugin maps color-field to no module. The picker and the value are the browser’s.

Accessibility contract

• A visible label through <label for>: the swatch shows the value, not the purpose.
• One tab stop; Enter or Space opens the picker.
• The picker’s keyboard and its announcements belong to the browser or the operating system.

Keyboard

Platform features

Without JavaScript

Fully functional: picking a color and submitting it with a form need no script.

Server rendering

The value attribute renders the initial color.

Before hydration

Nothing is attached; the field works before and after hydration alike.

Styling

color-field.css removes the native appearance, draws a bordered box at the control height and rounds the swatch through ::-webkit-color-swatch and ::-moz-color-swatch, each in its own rule because a selector list with an unknown pseudo-element is dropped whole. Under forced colors the swatch keeps its color, since it is the value. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::-moz-color-swatch, ::-webkit-color-swatch, ::-webkit-color-swatch-wrapper, :disabled, :focus-visible, :hover, :user-invalid, [aria-invalid="true"].

Variant attributes: data-status (warning, error).

Controlled integration

Bind the value to show it, store it or apply it. It is always a lowercase #rrggbb string.

<script lang="ts">
	let accent = $state('#2f6fde');
</script>

<label for="color-field-accent">Accent color</label>
<input id="color-field-accent" type="color" name="accent" bind:value={accent}
	data-slean="color-field" />
<!-- The value is always lowercase #rrggbb. -->
<output for="color-field-accent">{accent}</output>

Compatibility notes

The picker differs between browsers. The HTML standard adds alpha and colorspace attributes: Safari 27 implements both, and with either one the value becomes a CSS color function instead of hex; Chrome 153 implements neither. The contract does not use them, so the value stays #rrggbb everywhere.

Testing

• apps/playground/tests/primitives/inputs-overlays.spec.ts Playwright, with page JavaScript enabled and disabled, and axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/color-field/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/color-field/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/color-field.css the optional stylesheet