DateInput
Date picker input with built-in calendar widget and date validation
Basic Date Input
Simple date input with default styling
Show Code
Date Input Sizes
Different sizes for various contexts
Show Code
Date Input Colors
Different color variants
Show Code
Date Input with Constraints
Date inputs with min/max restrictions
Show Code
Date Input States
Different states and variants
Show Code
Usage Notes
- Uses native HTML5 date input for best accessibility
- Automatically validates date format and constraints
- min and max props restrict selectable date range
- Browser shows native date picker UI
- Value should be in YYYY-MM-DD format
- Consider timezone implications for date handling
- Ghost variant works well in minimal form designs