组件 选择控件

选择控件

选择控件允许用户对选项进行选择。

本指南介绍了三种类型的选择控件。

  • 复选框允许从一组选项中选择多个。
  • 单选框允许从一组选项中选择单个。
  • 开关用于切换选项的开启或关闭状态。
颜色

选择控件使用应用的强调色

主题

选择控件支持亮色与暗色主题。

Material Design 中的选择控件

复选框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

复选框允许用户从一组选项中选择多个。

若列表中有多个选项,使用复选框而非开关可以节省空间。

若只有单个选项或设置项,应使用开关,而非复选框。

Material Design 亮色主题复选框

亮色主题

Material Design 暗色主题复选框

暗色主题

亮色主题

开:500号色板,不透明度 100%
关:#000000,不透明度 54%
禁用:#000000,不透明度 26%

Material Design 亮色主题复选框状态示例

亮色主题下复选框在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

暗色主题

开:500号色板,不透明度 100%
关:#FFFFFF,不透明度 70%
禁用:#FFFFFF,不透明度 30%

Material Design 暗色主题复选框状态示例

暗色主题下复选框在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

单选框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

单选框允许用户从一组选项中选择一个。如果你认为用户需要并排查看所有可用选项,可使用单选框进行选择。

此外,也可考虑使用更节省空间的下拉菜单。

Material Design 亮色主题单选框

亮色主题的单选框

Material Design 暗色主题单选框

暗色主题的单选框

亮色主题

开:500号色板,不透明度 100%
关:#000000,不透明度 54%
禁用:#000000,不透明度 26%

Material Design 亮色主题单选框状态示例

亮色主题下单选框在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

暗色主题

开:500号色板,不透明度 100%
关:#FFFFFF,不透明度 70%
禁用:#FFFFFF,不透明度 30%

Material Design 暗色主题单选框状态示例

暗色主题下单选框在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

开关 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

开关用于切换单个设置项的状态。开关所控制的选项及其状态,应在对应的标签中明确标示。开关采用与单选框相同的视觉属性。

已弃用内置“开”和“关”文字的滑动开关。请改用此处展示的开关。

Material Design 亮色主题开关

亮色主题

Material Design 暗色主题开关

暗色主题

亮色主题

打开时的滑块手柄:500号色板,不透明度 100%
打开时的轨道:500号色板,不透明度 50%

关闭时的滑块手柄:灰色50,#FAFAFA,不透明度 100%
关闭时的轨道:#000000,不透明度 38%

禁用时的滑块手柄:灰色400,#BDBDBD,不透明度 100%
禁用时的轨道:#000000,不透明度 12%

Material Design 亮色主题开关状态示例

亮色主题下开关在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

暗色主题

打开时的滑块手柄:200号色板,不透明度 100%
打开时的轨道:200号色板,不透明度 50%

关闭时的滑块手柄:灰色400,#BDBDBD,不透明度 100%
关闭时的轨道:#FFFFFF,不透明度 30%

禁用时的滑块手柄:灰色800,#424242,不透明度 100%

禁用时的轨道:#FFFFFF,不透明度 10%

Material Design 暗色主题开关状态示例

暗色主题下开关在悬停、聚焦、按下、禁用及禁用且聚焦时的状态。

仅在以触控操作为主的设备上使用外侧径向反馈(涟漪效果),因为手指的触控面积可能会完全遮挡元素。桌面端使用鼠标指针时则无需此额外提示。

Material Design:移动端开关的径向动效

移动端的径向反馈(涟漪效果)

Material Design:桌面端开关无需径向动效

桌面端无径向反馈