Components
Radar and Notes view switch
Switch representation of the same selected day without losing its date context.
On this page
Purpose and usage
Switch representation of the same selected day without losing its date context.
Use only when the views represent the same daily context, not to navigate unrelated product destinations.
Anatomy
| Part | Contract |
|---|---|
| Group | Choose the day view label. |
| Option | Icon plus Radar or Notes label. |
| Selected option | Ink fill, canvas label, aria-pressed true. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| value | radar or notes. |
| onChange | Parent controls the selected view and any scroll behavior. |
State coverage
| State | Implemented behavior |
|---|---|
| Radar | Daily time-based agenda visible. |
| Notes | Selected day’s running notes visible. |
| Selected | One pressed button; no tab-role assumption. |
Interaction and responsive behavior
- Use the same selectedDate for both views.
- A Notes selection requests scrolling to the notes end in RadarWorkspace.
- Keep both choices visible on narrow screens.
Accessibility contract
- role=group with named buttons and aria-pressed.
- These are native buttons rather than an ARIA tabs implementation.
- Both labels remain visible; icons are decorative.
Known gaps and readiness
The source does not implement tablist arrow-key behavior, and this documentation does not prescribe that behavior as already present.
Composition example
<RadarViewToggle value={view} onChange={setView} />Source references
| File | Responsibility |
|---|---|
| app/components/radar-view-toggle.tsx | Two-option controlled view group |
| app/components/radar-workspace.tsx | Date/view orchestration |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1