Toggle group

A row of toggles that share one value: each is a slab cut on both sides, so the row nests like the tabs.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/toggle-group

Examples

One view, several districts

toggle-group-districts.tsx

import { useState } from "react";import { ToggleGroup, ToggleGroupItem } from "@/components/zero/toggle-group";export default function ToggleGroupDistricts() {  const [view, setView] = useState(["list"]);  return (    <div className="grid justify-items-start gap-4">      <ToggleGroup value={view} onValueChange={setView} variant="secondary">        <ToggleGroupItem value="list">List</ToggleGroupItem>        <ToggleGroupItem value="map">Map</ToggleGroupItem>        <ToggleGroupItem value="board">Board</ToggleGroupItem>      </ToggleGroup>      <ToggleGroup multiple defaultValue={["harbor"]} size="sm">        <ToggleGroupItem value="harbor">Harbor</ToggleGroupItem>        <ToggleGroupItem value="rail">Rail yards</ToggleGroupItem>        <ToggleGroupItem value="market">Old market</ToggleGroupItem>        <ToggleGroupItem value="docks">Canal docks</ToggleGroupItem>      </ToggleGroup>    </div>  );}

Behaviour

Pick one, or several with multiple. Arrow keys move between items. Set the variant and size once on the group.

Props

ToggleGroup

Prop	Type	Default	Description
multiple	boolean	false	Lets several items be on.
value / defaultValue	string[]	—	The items that are on.
variant, size	Toggle's	—	For every item.

Also takes every prop of Base UI's ToggleGroup.

ToggleGroupItem

Prop	Type	Default	Description
value	string	—	Its value in the group.

Also takes every prop of Base UI's Toggle.