@ug666/react 文档演示

Switch 开关

Switch 用于布尔值切换，常见于系统设置、权限与偏好配置。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Switch } from '@ug666/react'

变体预览

基础开关与左侧标签布局。

启用自动保存深色模式

状态展示

禁用态与当前状态值展示。

只读配置自动保存：开启

尺寸展示

Switch 本身为固定尺寸，通常通过标签字号与行高控制密度。

紧凑表单标准表单

代码示例

推荐用受控模式同步业务状态。

import { useState } from 'react'
import { Switch } from '@ug666/react'

export function NotificationSwitch() {
  const [enabled, setEnabled] = useState(true)

  return (
    <Switch
      checked={enabled}
      onCheckedChange={setEnabled}
      label="邮件通知"
    />
  )
}

Props 说明

属性	类型	默认值	说明
checked	boolean	—	当前选中状态。
onCheckedChange	(checked: boolean) => void	—	切换开关时触发。
label	string	—	开关标签文本。
labelPlacement	'left' \| 'right'	'right'	控制标签文字位置。