Figma component
Show the component in Figma
Beta
Show details
Overview
The Field Daterange component enables users to select a start and end date, providing an intuitive and consistent experience for selecting date ranges across applications.
Anatomy
- Field Label (optional): Indicates to users the expected input.
- Input Fields: Displays the selected date range or placeholder.
- Description Text (optional): Clarifies how to select the date range.
- Calendar Icon Button: Opens the calendar for selecting the date range.
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
The Field DateRange component supports the following states:
- Default: Standard appearance when inactive.
- Hover: Visual feedback on mouse or keyboard hover.
- Focus: Indicates active focus for input.
- Disabled: Non-interactive, visually muted.
- Readonly: Display-only state without input changes.
Themes
Spark light
Spark dark
Ocean light
Ocean dark
Best Practice
✅ Do:
- Use the Field DateRange for clear start and end date selection.
- Provide helpful field labels and descriptions to support user understanding.
- Use clear placeholder text that matches expected date formats.
- Show error messages prominently when validation fails.
❌ Don’t:
- Don’t use the Field DateRange if users only need to select a single date—use the Field Date component instead.
- Avoid using generic placeholder text—customize it to match user expectations and domain-specific language.
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.