DateRangeField

DateRangeField is a compound component for connected start and end date entry that combines typed range input, optional calendar selection, and shared range validation.

Storybook Source

Overview

DateRangeField styling is split across the inherited TextField surface, the popover-mounted calendar, and a small local contract on DateRangeFieldTriggerIconButton.

Public CSS Variables

Stay

Variable	Value	Affects
Keeps the trigger aligned with input height.`DateRangeFieldTriggerIconButton`		No visible change in this state
Trigger icon color.`DateRangeFieldTriggerIconButton`		No visible change in this state
Hover background for the trigger.`DateRangeFieldTriggerIconButton`		No visible change in this state
Trigger icon color on hover.`DateRangeFieldTriggerIconButton`		No visible change in this state
Trigger icon color while pressed.`DateRangeFieldTriggerIconButton`		No visible change in this state
Trigger background while pressed.`DateRangeFieldTriggerIconButton`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

DateRangeField: inherits most visuals from TextField.
DateRangeFieldInput: follows the same field surface model as other text-entry controls.
DateRangeFieldTriggerIconButton: uses local button variables backed by theme tokens.
DateRangeFieldCalendar: follows Calendar and Popover styling contracts.

State And Variant Interaction

Disabled state should dim the input and trigger together.
Error styling should come from the surrounding field state instead of one-off trigger overrides.
Range-specific styling should remain legible when both start and end values are partially filled.

Examples

.analyticsRangeTrigger {
  --button-color: var(--label-secondary);
  --button-background-color-hover: var(--fills-secondary-hover);
}

.compactRangeTrigger {
  --icon-button-size: 32px;
}

Children of DateRangeFieldTriggerIconButton replace its default calendar icon; the button keeps its size, states and accessible name.

LTRRTL

custom-trigger-icon.tsx · 71 lines

import { CalendarDaysIcon } from '@vega-ui/icons';
import {
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

Do Not Override

Do not hide focus or invalid states with custom trigger colors.
Do not restyle the calendar in this layer; that belongs to Calendar and Popover.
Do not replace semantic theme tokens with raw palette values in field-level overrides.