Input Color

Input Color связывает ручной ввод hex с нативным пикером: изменение одного контрола обновляет другой.

Статус: experimental · в системе с 2026-06 · интерактивность: always (всегда)

Когда использовать

Один цвет как значение формы: бренд-цвет, фон, акцент.
Нужны оба способа ввода: ручной hex и системный пикер.

Не использовать:

Палитра из нескольких цветов — это набор отдельных полей.
Выбор из готовых пресетов — покажи варианты, а не пикер.

Альтернативы:

radio — выбор из фиксированных пресетов (variant="images")
input — текстовый код цвета без пикера

Конструктор

Меняйте свойства Input Color, сочетайте их и проверяйте результат в одном живом экземпляре.

Цвет

Базовый

Подпись плавает наверху, пока в поле есть значение цвета. Свотч открывает нативный пикер.

Color

Поверхность

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputColor from "$lib/ui/InputColor.svelte";

let brand = $state("#ed7f6e");
let surface = $state("#444545");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
  <InputColor label="Color" bind:value={brand} />
  <InputColor label={t("Поверхность")} bind:value={surface} />
</div>

Без подписи

Без label свотч и hex выровнены по центру строки.

<script>
import InputColor from "$lib/ui/InputColor.svelte";

let accent = $state("#2196f3");
</script>

<div style="display: grid; width: var(--control-field-min);">
  <InputColor bind:value={accent} />
</div>

Поле

Наследует от Input: подсказку, описание, ошибку, обязательность, только чтение.

Бренд

Фон

Обязательный

Только чтение

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputColor from "$lib/ui/InputColor.svelte";

let brand = $state("#ed7f6e");
let required = $state("#000000");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
  <InputColor label={t("Бренд")} bind:value={brand} hint={t("Основной цвет акцента")} />
  <InputColor label={t("Фон")} value="#444545" description={t("Используется для тёмных поверхностей.")} />
  <InputColor label={t("Обязательный")} bind:value={required} required />
  <InputColor label={t("Только чтение")} value="#95e29f" readonly />
</div>