Figma component
Show the component in Figma
Beta
Show details
Overview
The Field Date component provides a user-friendly way for users to input or select a date. It ensures consistent styling and behavior across applications, adapting to various states and form layouts.
Anatomy
- Field Label (optional): Provides context and guides the user.
- Input Field: Displays the selected date or placeholder.
- Description Text (optional): Offers additional instructions.
- Calendar Icon Button: Opens the calendar popover for selecting a date.
Component API
|
Property |
Type |
Description |
|---|---|---|
|
State |
Default | Hover | Focus on first date | Focus on second date | Disabled | Readonly |
Visual and interactive states of the field. |
|
Error |
boolean |
Displays the field in error state. |
|
required |
boolean |
Displays an asterisk if the field is mandatory. |
|
Has label |
boolean |
Displays the field label. |
|
↳ Label |
string |
Custom content for the field label. |
|
Has description |
boolean |
Displays the description text. |
|
↳ Description |
string |
Custom content for the description. |
|
Has error description |
boolean |
Displays the error description text. |
|
↳ Error description |
string |
Custom content for the error message. |
|
Open |
boolean |
Toggles the visibility of the calendar popover. |
States
date | states
The Field Date component supports the following states:
- Default: Standard appearance when not focused.
- Hover: Changes on mouse or keyboard focus.
- Focus: Indicates when the field is actively selected.
- Disabled: Non-interactive state.
- Readonly: Display-only state without interactions.
Best Practice
✅ Do:
- Use the Field Date for precise date selection, ensuring clarity and alignment with date formats used in your domain.
- Indicate required fields using the required property.
- Provide descriptive labels and help texts to guide users.
- Use consistent date formats that match user expectations.
❌ Don’t:
- Don’t overload the field with unnecessary information; keep it simple and focused.
- Avoid using it as a general input field—use it specifically for date selection.
Links
The latest UI designs for the Field Date component can be found in our [Figma file].
The component is also available in our [Storybook] for hands-on testing and reference, supporting stacks like Web Component, Blazor, Angular, React, and VueJS.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.