Switch

斜切的轨道内嵌一块斜切块。开启时轨道填充强调色，斜切块弹到另一端；无论停在哪一端，斜切块都与轨道的切角平行。

安装

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/switch

示例

开启、关闭与大尺寸

Night routesShare my positionLarger, beside larger text

switch-basic.tsx

import { Switch } from "@/components/zero/switch";export default function SwitchBasic() {  return (    <div className="grid gap-4">      <label className="flex items-center gap-3">        <Switch defaultChecked />        Night routes      </label>      <label className="flex items-center gap-3">        <Switch />        Share my position      </label>      <label className="flex items-center gap-3 text-zero-lg">        <Switch />        Larger, beside larger text      </label>    </div>  );}

行为

斜切块滑动时带回弹：越过终点后再退回。尺寸以 em 为单位：旁边的文字越大，整个开关越大。

立即生效的设置（如开启夜间路线）用 Switch；随表单一同提交的选项用 Checkbox。

属性

Switch

属性	类型	默认值	说明
checked	boolean	—	是否开启（受控），配合 onCheckedChange 使用。
defaultChecked	boolean	false	默认是否开启（非受控）。

另可传入 Base UI Switch.Root 的全部属性。