Switch
switch开关 · Base UI 受控 + ARIA
用法
基础用法
默认关闭，点击切换开关。
tsx
<Switch aria-label="开关" />默认开启
非受控写法用 defaultChecked 设初始开启态。
tsx
<Switch defaultChecked aria-label="开关" />禁用
disabled 锁定开关，关/开两态均可禁用。
tsx
<>
<Switch disabled aria-label="禁用-关" />
<Switch disabled defaultChecked aria-label="禁用-开" />
</>带说明文字
用 label 关联文案，点击文字也能切换。
tsx
<label className="inline-flex items-center gap-2">
<Switch defaultChecked aria-label="接收通知" />
<span className="text-sm text-foreground">接收通知</span>
</label>何时用
切换一个即时生效的布尔开关（如「开启通知」），改动立刻应用、无需提交按钮时用。需在两个互斥选项间二选一且语义对等用 Radio；提交表单时勾选的布尔项（如「同意条款」）用 Checkbox。
导入
ts
import { Switch } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| checked | boolean | — | 受控开关态 |
| defaultChecked | boolean | false | 非受控初始态 |
| disabled | boolean | false | 禁用 |
| id | string | — | — |
| className | string | — | — |
| aria-label | string | — | 无可见标题时提供 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onCheckedChange | (checked: boolean) => void | 开关变化回调 |
禁忌 / 坑
- 用
checked/onCheckedChange即受控，须自管 state；只给初值用defaultChecked，二者不要混用。 - 无可见标题时务必给
aria-label，否则读屏无名。
相关
Input · Textarea · Select · Checkbox · CheckboxGroup · Radio
Playground
<Switch />