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
| 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. |
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.
Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.
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.
Date input in all three status states: error, warning, and success. Use to surface validation issues, caution the user, or confirm a valid selection.