Astryx Design System

Date Input@astryxdesign/core v0.0.15 · DateInput

Usage

DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.

ts
import {DateInput} from '@astryxdesign/core/DateInput'

Best practices

Guidance	Practices
Do	Provide clear labels and descriptions so users understand what date is expected.
Do	Use min, max, and dateConstraints to restrict selectable dates to valid ranges.
Do	Use hasClear when the date is optional so the user can reset it.
Do	Show a loading state with changeAction when the date triggers a server-side save.
Don't	Use a DateInput for free-form text that does not represent a calendar date.
Don't	Hide the label without surrounding context that makes the field purpose obvious.
Don't	Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.

Examples

Common configurations, variations, and states.

DateInput — Clearable

Date input with a clear button that resets the value. Use when the date field is optional and the user may need to undo their selection.

DateInput — Date Range

Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.

DateInput — Description

Date input with helper text below the label explaining what the field expects. Use when the purpose of the date is not obvious from the label alone.

DateInput — Validation

Date input in all three status states: error, warning, and success. Use to surface validation issues, caution the user, or confirm a valid selection.