shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Display
Timeline Controls Button Group for React
A time range picker with Day, Week, Month and Year, and a row of 1H to All ranges that share one selection.
The range switch above a metrics chart. Calendar periods go in the first row, rolling windows such as 24H and 30D in the second. Both write one value starting at Week, and the selected button is filled and announced as pressed.
Preview
Installation
FAQ
How is the selected range tracked?
One value, starting at week. Each button carries its own value, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
Do the two rows share a selection?
Yes. Picking 7D clears Week. Keep two values if the period and the window should be set separately.
Does the demo filter any data?
No. It only stores the choice. Turn 24h or month into dates where you query your data.
How do I add a custom range?
Add a Custom button that opens a date range picker, as the Date Selector example lists. This demo has fixed ranges only.
How does the keyboard move through it?
Tab moves from button to button, and Enter or Space selects. A Toggle Group adds Arrow key movement.
Related
- Chart Controls Button GroupA chart type picker with Line, Bar and
- Date Selector Button GroupA date range picker with presets from
- Segmented Control Button GroupTwo segmented controls of ghost buttons
- Date Picker with RangeA date range picker that shows two months
- Default Toggle GroupA toggle group for bold, italic and
- Density Controls Button GroupA display density picker with Compact