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.
Let a person choose one calendar date from a month grid — the "pick a due date" / "pick a birthday" control.
import { DatePicker } from "@liquidify/react/date-picker"| Prop | Type | Default | Description |
|---|---|---|---|
| calendar | string | undefined | derived from `locale`, else `"gregory"` | `Intl` calendar id for name/numeral formatting only (the grid stays Gregorian in v1; alternate-calendar arithmetic is out of scope). When omitted, derived from `locale`, else `"gregory"`. |
| 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 | Date | undefined | today's date, resolved once at mount | Uncontrolled seed (ignored once {@link DatePickerProps.value} is supplied). For deterministic SSR, supply this; otherwise the seed resolves to the client's "today" at mount. |
| disabled | boolean | undefined | — | When `true`, dims the control, sets `aria-disabled`/`data-disabled` on the root, removes every day cell from the tab order, and natively disables both chevron `<button>`s. |
| firstDayOfWeek | 0 | 3 | 2 | 5 | 1 | 4 | 6 | undefined | derived from `locale`, else `0` (Sunday) | First weekday column, `0` (Sunday) … `6` (Saturday) — reorders the weekday headers and the leading-pad offset. When omitted, derived from `locale` (`Intl.Locale#getWeekInfo`), else `0`. The analogue of `Calendar.firstWeekday`. |
| labelProps | LabelProps | undefined | — | Per-instance typography overrides for the header's month-year label, threaded verbatim into the internal `DisclosureGroup`'s own `labelProps` (ADR-0028). Omitted → DisclosureGroup's headline/bold/primary defaults. |
| locale | string | undefined | en-US | BCP-47 locale for `Intl` month/weekday names and day numerals. Omitting it reproduces the historic `en-US` output exactly. |
| max | Date | undefined | — | Latest selectable day (inclusive) — the upper-bound counterpart of {@link DatePickerProps.min}; `max`'s year raises the year wheel's range. |
| min | Date | undefined | — | Earliest selectable day (inclusive). Days before `min` are `aria-disabled` + `data-disabled`, non-selectable, and excluded from the roving tabindex; `min`'s year lowers the year wheel's range. Invalid → ignored (dev warning). The web analogue of `DatePicker(_:in:)`'s lower bound. |
| onChange | ((next: Date) => void) | undefined | — | Fires with the next selected `Date` whenever a day is committed (`Enter`/`Space` or tap/click), in both modes. Never fires for `visibleMonth` navigation, nor for a disabled or out-of-`[min,max]` day. |
| ref | Ref<HTMLDivElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| value | Date | undefined | — | Controlled selection. Passing this switches DatePicker to controlled mode (consumer owns it via {@link DatePickerProps.onChange}). Continuous-domain `Date`, not the catalog's usual `string` — a documented narrowing of the ADR-0015 shape. An Invalid Date is rejected (dev warning) and the control falls back to its deterministic default. |
| variant | "graphical" | undefined | graphical | Visual style — a single-member, forward-compatible axis. `"graphical"` is the default and only member in v1; `.compact`/`.wheel` are Out of scope. |
DatePicker supports the documented keyboard interactions below.
| Name | Value |
|---|---|
| --lq-color-accent | #007aff |
| --lq-color-on-action-primary | #ffffff |
| --lq-date-picker-cell | var(--lq-space-40) |
| --lq-date-picker-gap | var(--lq-space-8) |
| --lq-date-picker-icon-size | calc(var(--lq-space-24) - var(--lq-space-2)) |
| --lq-date-picker-pad | Component-defined value |
| --lq-disclosure-group- | var(--lq-space-16)var(--lq-space-8) |
| --lq-focus-ring-color | var(--lq-button-ring, var(--lq-color-accent))var(--lq-toggle-ring, var(--lq-color-accent))var(--lq-slider-ring, var(--lq-color-accent))var(--lq-tint-current, var(--lq-color-accent)) |
| --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-icon-size-small | Component-defined value |
| --lq-picker- | var(--lq-space-4)var(--lq-space-12)var(--lq-space-40)calc(var(--lq-picker-track-h, var(--lq-space-40)) - 2 * var(--lq-picker-pad, var(--lq-space-4)))var(--lq-picker-pad, var(--lq-space-4))var(--lq-space-32)var(--lq-picker-track-h, var(--lq-space-40))var(--lq-picker-wheel-band-h)calc( var(--lq-picker-wheel-band-h, var(--lq-space-40)) + 2 * var(--lq-picker-pad, var(--lq-space-4)) )calc(var(--lq-picker-wheel-pitch) * 5)calc(6 * var(--lq-date-picker-cell) + 5 * var(--lq-date-picker-gap))light-dark( var(--lq-color-label-quaternary-light), var(--lq-color-label-quaternary-dark) ) |
| --lq-picker-wheel-h | calc(var(--lq-picker-wheel-pitch) * 5)calc(6 * var(--lq-date-picker-cell) + 5 * var(--lq-date-picker-gap)) |
| --lq-radius-14 | 0.875rem |
| --lq-radius-large | Component-defined value |
| --lq-radius-pill | 9999rem |
| --lq-segmented-control-icon-size | calc(var(--lq-space-24) - var(--lq-space-2)) |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |
| --lq-space-12 | 0.75rem |