DateField

DateField is a compound component for single-date entry that combines typed input, optional calendar selection, and field-level constraints in one control.

Storybook Source

Overview

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

Public CSS Variables

Due date

Variable	Value	Affects
Keeps the trigger aligned with input height.`DateFieldTriggerIconButton`		No visible change in this state
Trigger icon color.`DateFieldTriggerIconButton`		No visible change in this state
Hover background for the trigger.`DateFieldTriggerIconButton`		No visible change in this state
Trigger icon color on hover.`DateFieldTriggerIconButton`		No visible change in this state
Trigger icon color while pressed.`DateFieldTriggerIconButton`		No visible change in this state
Trigger background while pressed.`DateFieldTriggerIconButton`		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

DateField: inherits most field visuals from TextField.
DateFieldInput: uses the same field surface and text treatment as other text-entry controls.
DateFieldTriggerIconButton: defines local button variables that reference theme tokens such as --text-color and --fills-quaternary-hover.
DateFieldCalendar: mostly follows Calendar and Popover styling contracts instead of a separate field-local variable set.

State And Variant Interaction

disabled should dim both typed input and trigger affordance consistently.
Error styling should come from the surrounding field state instead of ad-hoc trigger overrides.
Theme-level tokens should drive the look before any component-local overrides.

Examples

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

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

Children of DateFieldTriggerIconButton 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 force trigger colors that hide focus or invalid states.
Do not restyle the calendar here; use Calendar or Popover contracts for that layer.
Do not replace semantic theme tokens with raw palette values inside field-level overrides.