shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Forms
Date Selector Button Group for React
A date range picker with presets from Today to Custom, and This Week, This Month and This Year that share one selection.
Preset date ranges for a report or a filter form. The first row covers the common rolling ranges and ends with Custom; the second row picks a calendar period. One value backs both rows, so exactly one button is filled and pressed.
Preview
Installation
FAQ
How is the selected range tracked?
One value, starting at today. Each button carries its own value, such as last7days or thisMonth, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
What does Custom do?
In the demo it's selected like any other preset. Open a Date Picker with a range when Custom is chosen.
How do I turn a preset into dates?
Map each value to a start and end date where you run the query. The demo only stores the key.
Do the two rows share a selection?
Yes. Picking This Week clears Today. Use separate values if both should be set.
How do I submit the choice with a form?
Put a hidden input with the selected value in the form, or read it in your submit handler. The buttons have type="button", so pressing one doesn't submit.
What if five presets don't fit?
The group doesn't wrap. On narrow screens, use a Select for the presets or drop the less used ones.
Related
- Timeline Controls Button GroupA time range picker with Day, Week, Month
- Priority Selector Button GroupA priority picker with Low, Medium, High
- Date Picker with RangeA date range picker that shows two months
- Default Toggle GroupA toggle group for bold, italic and
- Basic Button GroupThree rows of outline buttons joined into
- Quantity Picker Button GroupTwo quantity pickers with minus and plus