FieldColor

Поле выбора цвета. Базируется на FieldDecorator и @cloud-ru/ds-input-private, а палитру открывает через @cloud-ru/ds-dropdown + @cloud-ru/ds-color-picker. Слева — swatch с текущим цветом, справа — шеврон открытия палитры. Значение редактируется напрямую в инпуте (hex/rgb-строка) или в палитре.

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

• Настройка цвета в редакторах тем, брендинга, диаграмм.
• Поле формы, где значение — цвет в HEX/RGB/HSV.
• Для статичного показа значения цвета используйте readonly с автоматической кнопкой копирования.

Анатомия

Swatch и шеврон

Поле собирается из:

• swatch — квадрат-превью текущего цвета слева от инпута. Пустое значение даёт прозрачный swatch.
• input — текстовое значение цвета (hex/rgb-строка), редактируется напрямую.
• chevron — индикатор открытия палитры справа. Смотрит вниз в закрытом состоянии и вверх — когда палитра открыта. В readonly шеврон скрыт.

Size (default m)

ValidationState (default default)

Управляет тонировкой acrylic-фона и иконкой подсказки. Проп error форсит error.

Background (default true)

Включает acrylic-фон поля (тонируемый по validationState).

• true — поле с acrylic-оболочкой и состояниями hover/focus.
• false — без фона, для встраивания в плотные/кастомные контейнеры.

AvailableModes (default ['hex', 'rgb', 'hsv'])

Ограничивает набор цветовых моделей в переключателе палитры.

• hex — #rrggbb / #rrggbbaa.
• rgb — каналы R/G/B.
• hsv — тон, насыщенность, яркость.

Установка

pnpm add @cloud-ru/ds-fields

import { FieldColor } from '@cloud-ru/ds-fields'

Примеры использования

Базовое поле

import { FieldColor } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function ColorBasic() {
  const [value, setValue] = useState('#1976d2');
  return (
    <FieldColor
      label='Цвет акцента'
      hint='Откройте палитру шевроном или кликом по полю'
      value={value}
      onChange={setValue}
    />
  );
}

Прозрачность

import { FieldColor } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function ColorWithAlpha() {
  const [value, setValue] = useState('rgba(255, 87, 34, 0.5)');
  return (
    <FieldColor
      label='Цвет с прозрачностью'
      hint='withAlpha добавляет слайдер и поле Alpha в палитру'
      withAlpha
      value={value}
      onChange={setValue}
    />
  );
}

Ограниченные модели

import { FieldColor } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function ColorModes() {
  const [value, setValue] = useState('#4caf50');
  return (
    <FieldColor
      label='Только HEX и RGB'
      hint='availableModes ограничивает переключатель моделей в палитре'
      availableModes={['hex', 'rgb']}
      autoApply
      value={value}
      onChange={setValue}
    />
  );
}

Readonly с копированием

import { FieldColor } from '@cloud-ru/ds-fields';

export function ColorReadonly() {
  // readonly блокирует ввод — onChange не нужен, значение показывается из defaultValue.
  return <FieldColor label='Цвет токена' readonly defaultValue='#7e57c2' showCopyButton />;
}

Props

Types

FieldColorProps

FieldLayoutPresets

Related props

ColorMode

FieldLength

InputMode

QuestionTooltipProps

Size

Type

ValidationState

Storybook

Figma