Skip to content

TimeSelect 时间选择

从固定时间段中选择。采集、约束并校验用户输入。

实时示例

LIVE · TimeSelectElement Plus / sunui
选择服务时间
Vue 示例
<el-time-select />

使用规则

应该

标签说明输入含义,帮助文本说明格式,错误信息说明原因和修复方式。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-time-select>时间选择</el-time-select>

设计变量

color.interactive.primarycolor.status.dangerspacing.smradius.sm

无障碍

字段必须有可关联标签;错误不能只用颜色表达;键盘顺序应与视觉顺序一致。