组件 选择控件

选择控件

选择控件允许用户选择选项。

本文包含了三种类型的选择控件:

  • 复选框允许从一组选项中选择多个选项。
  • 单选按钮允许从一组选项中选择单个选项。
  • 开关允许打开或关闭选项。

颜色

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

主题

选择控件在暗色和亮色主题下都可以使用。

复选框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

如果列表中有多个选项,使用复选框会比开关更节省空间。

如果只有一个选项,应该使用开关而不是复选框。

亮色主题

暗色主题

亮色

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

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

暗色

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

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

单选按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

单选按钮允许用户从一组选项中选择一个选项。如果用户需要并排看到所有选项的话就使用单选按钮。

此外,如果需要节省空间则考虑使用下拉菜单。

亮色主题的单选按钮

暗色主题的单选按钮

亮色

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

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

Dark

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

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

开关 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

开关可以切换单个选项的状态。开关的标签应当清晰的表明选项控制及其状态。开关和单选按钮视觉属性相同。

不要使用写着「开」和「关」的滑块来切换,要使用这里的开关。

亮色主题

暗色主题

亮色

打开的滑块:主色调 500,不透明度:100%
打开的轨道:主色调 500,不透明度:50%

关闭的滑块:Grey 50,#FAFAFA,不透明度:100%
关闭的轨道:#000000,不透明度:38%

禁用的滑块:Grey 400,#BDBDBD,不透明度:100%
禁用的轨道:#000000,不透明度:12%

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

暗色

打开的滑块:主色调 200,不透明度:100%
打开的轨道:主色调 200,不透明度:50%

关闭的滑块:Grey 400,#BDBDBD,不透明度:100%
关闭的轨道:#FFFFFF,不透明度:30%

禁用的滑块:Grey 800,#424242,不透明度:100%

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

暗色主题的开关按钮在鼠标悬浮、聚焦、按下、禁用,禁用且聚焦时的状态。

只有在手指触控时才在表单的外围使用径向效果,因为在交互时手指会挡住元素。对于使用鼠标的桌面设备,没必要使用这种多余的效果。

手机上的径向效果

电脑上没有径向效果