Toggle group

共享同一个值的一排 Toggle：每一项都是两端带切角的斜切块，因此能像 Tabs 那样彼此嵌合。

安装

terminal

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

示例

视图单选，街区多选

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>  );}

行为

默认单选，传入 multiple 后可多选。用方向键在各项间切换焦点。变体与尺寸在组上统一设置一次即可。

属性

ToggleGroup

属性	类型	默认值	说明
multiple	boolean	false	允许多项同时开启。
value / defaultValue	string[]	—	处于开启状态的项。
variant, size	Toggle's	—	应用于所有项。

另可传入 Base UI ToggleGroup 的全部属性。

ToggleGroupItem

属性	类型	默认值	说明
value	string	—	该项在组中的值。

另可传入 Base UI Toggle 的全部属性。