ValyroUI English version

Color Picker

Выбор цвета. Бесплатно, MIT · Формы и ввод › Цвет, размер и эмодзи

Установка

npx valyro-cli@latest add color-picker
npx shadcn@latest add https://valyro.xyz/r/color-picker.json
npm install valyro-ui

import 'valyro-ui/styles.css';
import { ColorPicker } from 'valyro-ui';

Пропсы

PropTypeDefault
valuestringHex colour: #rrggbb, or #rrggbbaa when alpha is on and the colour is translucent.
defaultValuestringDEFAULT_COLORInitial value when uncontrolled.
onValueChange(value: string) => voidCalled with the new value when it changes.
alphabooleanfalseShow the opacity slider.
presetsstring[]Preset swatches (any hex form).
namestringSubmits the colour with the surrounding form as lowercase hex (#rrggbb or #rrggbbaa).
invalidbooleanfalseError state, e.g. from a FormField (marks the root with data-invalid).
labelsPartial<ColorPickerLabels>Overrides for the built-in English text; keys left out keep their defaults.

Похожие компоненты

  • Swatch Picker — Выбор цвета из образцов: товар, тема, метка
  • Size Picker — Выбор размера: плитки или прокручиваемая строка, нет в наличии
  • Emoji Picker — Выбор эмодзи: поиск, категории, оттенки кожи, недавние
  • Text Input — Текстовые поля
  • Textarea — Многострочный ввод
  • Search Input — Поисковая строка
  • Mentions Input — Текст с @упоминаниями и #тегами, асинхронные подсказки
  • Tags Input — Ввод тегов
  • Select — Выбор из списка
  • Multi Select — Множественный выбор
  • Combobox — Поиск и выбор
  • Listbox — Список вариантов на странице: один или несколько, диапазоны с Shift

Назад: Date Of Birth Input · Далее: Swatch Picker · Весь раздел «Формы и ввод»