video1.0<iframe src="https://www.loom.com/embed/614b81b810354c3c8202aa285cfe00b4" frameborder="0" width="1920" height="1440" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>14401920Loomhttps://www.loom.com14401920https://cdn.loom.com/sessions/thumbnails/614b81b810354c3c8202aa285cfe00b4-00001.gif58.34In this video, I will be demonstrating the advanced variant of the date range component, which you can find in the DS Official Component figma library. I have created a small prototype to showcase its functionality. The component includes a list of presets and a custom range option. I will show you how the user can select a date range using preset options, or progressively reveal the date range input for custom date ranges. Stay tuned for a quick and informative walkthrough. Enjoy! Advanced Date range input: https://www.figma.com/file/Tau6qv5iyr8wthWNqYktej/DS-Official-Components?type=design&node-id=52548%3A30938&mode=design&t=lpWIhw9elzp1Yq76-1 NOTE: This component is out of context. For guidance on using the asterisk for required fields visit the Forms PATTERN in the Product Design System guidance portal https://zeroheight.com/2ccf2b601/p/288da6-product-design-system