Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ColorPicker

An inline color canvas with hue, opacity, an eyedropper, and HEX/RGB/HSL/CSS editors.

CoreAdvanced Inputs@gaudi/design-system/core/ColorPickerView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { ColorPicker } from '@gaudi/design-system/core/ColorPicker';

Usage

import { ColorPicker } from '@gaudi/design-system/core/ColorPicker';
<ColorPicker label='Accent color' value={color} onValueChange={setColor} swatches={['#2563eb', '#16a34a', '#e11d48']} />

Examples

Playground

Storybook

Controlled

Storybook

Form and states

Storybook

API

11 props

Accessibility

The canvas supports mouse, pen, and touch. Its two keyboard stops adjust saturation and brightness with visible thumb focus; hue and opacity also support arrows and Home/End. Presets expose selection with a checkmark and pressed state. Invalid drafts have associated errors.

Notes

  • Hex/CSS text commits on Enter or blur; Escape restores the current color. Invalid drafts never change the selection. RGB and HSL use Gaudi NumberField.
  • With opacity controls shown, three- or six-digit hex preserves opacity; four- or eight-digit hex sets alpha explicitly. Screen sampling always preserves opacity. CSS names and other color spaces are unsupported.
  • Sampling requires browser support and a secure context. Cancellation is silent. Changing the color, disabling the picker, making it read-only, or hiding/unmounting the eyedropper aborts pending sampling.
  • Form reset clears drafts and restores the initial uncontrolled color, notifying only when it changes. Controlled values remain authoritative.
  • Layout and interactions are inspired by the shadcn.io Color Picker; all controls use Gaudi styling and primitives.
NumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examplesCalendarDate selection for single dates, ranges, bookings and localized calendars.11 examplesCascaderSelect items from hierarchical data using drill-down, columns, search and multiple selection.12 examplesFileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examplesInputOtpOne-time code entry with grouped slots, paste support and completion feedback.1 examplePhoneInputInternational phone entry with country selection and formatted numbers.1 example