shadcn.io is an independent project built on shadcn/ui
One choice, two rows, starting on Satellite. The first names Satellite, Road, Terrain, and Hybrid. The second is Map and Street, each with an icon and a label. Picking Street clears Satellite. No map is drawn.
Sit this on a map when the base layer is a short list. Give each row its own value if layer and view are separate. Arrow keys in one stop need a Toggle Group. In React, Ark UI does not render map tiles.
Installation
Anatomy
Usage
<div className="flex flex-col gap-4">
<ButtonGroup aria-label="Map layer">
{LAYERS.map((item) => (
<Button
aria-pressed={mapView === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={mapView === item.value ? "default" : "outline"}
>
{item.label}
</Button>
))}
</ButtonGroup>
<ButtonGroup aria-label="Map view">
{VIEWS.map((item) => (
<Button
aria-pressed={mapView === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={mapView === item.value ? "default" : "outline"}
>
<item.icon aria-hidden="true" data-icon="inline-start" />
{item.label}
</Button>
))}
</ButtonGroup>
</div>FAQ
How is the selected layer tracked?
One value, starting at satellite. 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 Street clears Satellite. Give each row its own value if the layer and the view should be chosen separately.
Are the icons on Map and Street announced?
No. MapIcon and Navigation2Icon have aria-hidden="true", so the buttons are read by their text.
Does this draw a map?
No. It only stores the choice. Pass it to your map library's style or layer option.
How do I place the group over the map?
Position the ButtonGroup absolutely inside the map container, for example at top-2 end-2, and give it a background so it reads over the tiles.
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 if you need it.
API Reference
Button Group
Sets aria-label="Map layer" and aria-label="Map view". The rest is on the Button Group page.
Button
Sets aria-pressed={mapView === item.value}, onClick={handleSelect}, size="sm", value={item.value} and variant={mapView === item.value ? "default" : "outline"}. The rest is on the Button page.
