DXC Logo
Halstack logo
Halstack
Design System
v8.0.0
OverviewIntroduction
PrinciplesColorSpacingTypographyLayoutThemesLocalization
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard

Date Input

Experimental

A date input is a user interface element where the user can type or select a date in a predefined format.

Date input

Date input design specifications
Date input design specifications

The date input color, typography, border, spacing, width and margin specifications are inherited from the text input, for reference check the text input component documentation.

The date input doesn't have the following text input elements or properties, therefore, their listed styles don't apply:

  • Prefix / Suffix
  • The size small is not available

Date picker dialog

Date specifications for picker
Structure and spacing for the date picker pop-up

States

Date input

States: enabled, hover, focus, error, and disabled.

Examples of the date input states
Examples of the date input states

Date picker dialog

States: default, hover, focus, active, selected, today and disabled.

Examples of a calendar day states
Examples of a calendar day states

Anatomy

Component anatomy example
  1. 1.
    Label
  2. 2.
    Helper text (Optional)
  3. 3.
    Input container
  4. 4.
    Date button
  5. 5.
    Clear action
  6. 6.
    Error indicator
  7. 7.
    Error message
  8. 8.
    Placeholder / value

🚧 Design tokens

The design tokens are currently under review and will be added soon.

Accessibility

WCAG 2.2

WAI-ARIA 1.2

Contents

Edit this page on GitHub
Previous
Chip
NextDialog