Switch

组件说明：开关控件，在 On/Off 两态之间切换，固定尺寸。
尺寸基线：轨道 36×20px，滑块 16×16px，左右留白 2px。
实现约定：轨道保留结构骨架，视觉由 design token 控制；loading 当前保持 Default 视觉并禁止交互。
Figma 规范

状态

6 种状态：On / Off × 启用 / 禁用 / Loading。

结果

实时编辑器

<div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch defaultChecked aria-label="demo on" />
    <span style={{ fontSize: 12, color: '#999' }}>On</span>
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch aria-label="demo off" />
    <span style={{ fontSize: 12, color: '#999' }}>Off</span>
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch defaultChecked disabled aria-label="demo disabled on" />
    <span style={{ fontSize: 12, color: '#999' }}>禁用 On</span>
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch disabled aria-label="demo disabled off" />
    <span style={{ fontSize: 12, color: '#999' }}>禁用 Off</span>
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch defaultChecked loading aria-label="demo loading on" />
    <span style={{ fontSize: 12, color: '#999' }}>Loading On</span>
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
    <Switch loading aria-label="demo loading off" />
    <span style={{ fontSize: 12, color: '#999' }}>Loading Off</span>
  </div>
</div>

状态	轨道颜色	滑块颜色	透明度
On + 启用	`Foregrounds/Toggle On`#1573D1	`Foregrounds/White`#FFFFFF	100%
Off + 启用	`Foregrounds/Toggle Off`#D6D6D6	`Foregrounds/White`#FFFFFF	100%
On + 禁用	`Foregrounds/Toggle On`#1573D1	`Foregrounds/White`#FFFFFF	60%
Off + 禁用	`Foregrounds/Toggle Off`#D6D6D6	`Foregrounds/White`#FFFFFF	60%
On + Loading	`Foregrounds/Toggle On`#1573D1	`Foregrounds/White`#FFFFFF	100%
Off + Loading	`Foregrounds/Toggle Off`#D6D6D6	`Foregrounds/White`#FFFFFF	100%

受控模式

结果

实时编辑器

function ControlledSwitch() {
  const [checked, setChecked] = useState(false)
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Switch checked={checked} onCheckedChange={setChecked} aria-label="controlled" />
      <span style={{ fontSize: 14 }}>{checked ? 'On' : 'Off'}</span>
    </div>
  )
}

尺寸规范

维度	值
轨道宽度	36px
轨道高度	20px
轨道圆角	5px
滑块尺寸	16×16px
滑块圆角	`Radius_5 - 2px`
滑块内边距	2px

Props

属性	类型	默认值	说明
`checked`	`boolean`	-	受控选中状态
`defaultChecked`	`boolean`	`false`	初始选中状态（非受控）
`onCheckedChange`	`(checked: boolean) => void`	-	状态变化回调
`disabled`	`boolean`	`false`	禁用状态（60% 透明度）
`loading`	`boolean`	`false`	加载态，当前保留 Default 视觉并禁止交互
`aria-label`	`string`	-	无障碍标签

状态​

受控模式​

尺寸规范​

Props​

状态

受控模式

尺寸规范

Props