Switch Row

开关行

A settings row with text on the left and a switch on the right — changes apply instantly, no save button.

All platformsFormsContent areaComponent

大白话说明

开关行是二值设置的标准形态:标题说清控制什么,副文案解释开/关的后果,开关即时生效。关掉重要功能(如备份、安全)时要二次确认或给出影响说明。

什么时候用

设置项是明确的开/关二值、且切换无副作用或副作用可即时撤销时。

什么时候不用

选项不是二值(低/中/高)时别用开关凑合,用分段控制;需要生效延迟的(重启后生效)要在副文案写明。

细节与变体

  • 点整行都能切换,开关本体只是视觉指示
  • 禁用态开关要连同标题一起置灰,并说明为什么不可用
  • 开关颜色只用一套语义:开=主色,别有的绿有的蓝

配套效果见下方「可用效果」。

Matching prompt (fill in & copy)

Effects you can apply

Reference implementations (open source)

  • Ant Design ↗ MIT · 免费(MIT)

    The de-facto standard for admin interfaces in China — tables, forms, lists.

  • TDesign ↗ MIT · 免费(MIT)

    Tencent's full-stack design system covering web, mobile, mini-programs, and desktop.

Related entries