表单与选择@neumorphism-ui/switch

Switch

在原生 checkbox input 上应用 role=switch，保留表单和浏览器行为。支持 checked、defaultChecked 和 onCheckedChange。

@neumorphism-ui/switch

Registry JSON

预览

实时价格自动刷新市场价格。邮件提醒仅接收重要变动。管理员策略当前工作区已锁定此设置。

安装

npx shadcn@latest add @neumorphism-ui/switch

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

npx shadcn@latest add @neumorphism-ui/switch @neumorphism-ui/label

Import

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

Example

<div className="flex items-center justify-between gap-4">
  <Label htmlFor="system-theme">跟随系统主题</Label>
  <Switch id="system-theme" name="systemTheme" defaultChecked />
</div>

API 参考

组件	属性	类型	默认值	说明
`Switch`	`checked / defaultChecked`	`boolean`	`—`	受控的开启状态或非受控初始状态。
`Switch`	`onCheckedChange`	`(checked: boolean) => void`	`—`	开启状态变化时调用。
`Switch`	`onChange`	`React.ChangeEventHandler<HTMLInputElement>`	`—`	接收原生 checkbox change event。
`Switch`	`disabled`	`boolean`	`false`	禁用输入和指针操作。
`Switch`	`name / value / required`	`native input props`	`—`	用于表单提交的原生 checkbox 属性。

预览

安装

用法

Import

Example

API 参考

无障碍