Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
A single control for choosing one colour — the canonical glass colour well.
import { ColorPicker } from "@liquidify/react/color-picker"| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| defaultValue | string | undefined | #000000 | Uncontrolled seed for the internal colour (ignored once {@link ColorPickerProps.value} is supplied). |
| disabled | boolean | undefined | false | When `true`, the whole control is dimmed, natively disabled, and removed from the tab order; no interaction commits a colour. |
| label | ReactNode | — | Visible label content — a string/number routes through the shared `Text` primitive (`color="inherit"`, ADR-0028); an element (e.g. `Label(systemImage:)`) passes through unwrapped. Required for an accessible name unless an explicit `aria-label`/`aria-labelledby` is supplied via the inherited props. |
| labelProps | LabelProps | undefined | — | Per-instance typography override for a string/number {@link label}, forwarded to the internal `Text` (ADR-0028). |
| onChange | ((next: string) => void) | undefined | — | Fires with the next hex string on every colour change inside the OS picker — live, on each drag step. A same-value change emits nothing. |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the outer wrapper `<div>` (charter §4 truthful ref; the documented semantic root, audit §8). |
| supportsOpacity | boolean | undefined | true | Gates the alpha channel: sets the native control's `alpha` attribute, so the platform picker offers an opacity axis and the committed value carries `#RRGGBBAA`. On an engine that does not yet implement `alpha`, the attribute is ignored and the value degrades to `#RRGGBB` — a platform limitation, not a library behaviour. |
| value | string | undefined | — | Controlled current colour. Passing this switches ColorPicker to controlled mode: the rendered disc always reflects this value and the consumer owns it via {@link ColorPickerProps.onChange}. Serialised as `#RRGGBB`, or `#RRGGBBAA` when {@link ColorPickerProps.supportsOpacity}. Shorthand (`#RGB` / `#RGBA`) is accepted and expanded; an unparseable string falls back to opaque black. |
ColorPicker supports the documented keyboard interactions below.
| Name | Value |
|---|---|
| --lq-color-label-primary | Component-defined value |
| --lq-color-picker-pad | var(--lq-space-8) |
| --lq-color-picker-rim | conic-gradient( var(--lq-color-system-red-default-light), var(--lq-color-system-orange-default-light), var(--lq-color-system-yellow-default-light), var(--lq-color-system-green-default-light), var(--lq-color-system-teal-default-light), var(--lq-color-system-cyan-default-light), var(--lq-color-system-blue-default-light), var(--lq-color-system-indigo-default-light), var(--lq-color-system-purple-default-light), var(--lq-color-system-pink-default-light), var(--lq-color-system-red-default-light) ) |
| --lq-color-picker-rim-w | var(--lq-space-2) |
| --lq-color-picker-value | light-dark(var(--lq-color-label-primary-light), var(--lq-color-label-primary-dark)) |
| --lq-color-picker-well-size | var(--lq-space-24) |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-hit-target-touch | 2.75rem |
| --lq-lens-x | Resolved by the active Liquidify theme |
| --lq-radius-pill | 9999rem |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |