Toggle
保持按下选择状态的独立切换按钮。 为纯图标按钮提供标签。通过内凹表面和边框辅助表示选择，而非只用颜色。
@neumorphism-ui/toggle预览
安装
安装: toggle
npx shadcn@latest add @neumorphism-ui/toggleCLI 会依次处理 npm 依赖、base token、utils 和组件源码。
首次使用此 Registry？请先完成 namespace 配置 。
用法
Import
Toggle import 代码
"use client";
import { Toggle } from "@/components/ui/toggle";Example
Toggle 用法代码
export default function Example() {
return (<div className="flex flex-wrap gap-3"><Toggle aria-label={"固定"}><span aria-hidden="true">◆</span>{"固定"}</Toggle><Toggle defaultPressed>{"固定"}</Toggle><Toggle disabled>{"不可用"}</Toggle></div>);
}API 参考
| 组件 | 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
Toggle | pressed / defaultPressed | boolean | — | 设置受控状态或初始状态。 |
Toggle | size | "sm" | "default" | "lg" | — | 选择控件尺寸。 |
Toggle | disabled | boolean | — | 禁用用户操作。 |
无障碍
- 01
为纯图标按钮提供标签。通过内凹表面和边框辅助表示选择，而非只用颜色。
- 02
修改 render 或 className 时保留标签关联和可见焦点。