SuperAPI AI 工具集

selection-input

前端与建站

查看项目

更新于 10-16 04:31

技能介绍

用途:选择输入用于让用户从预定义选项列表中挑选一个选项,选中结果通常显示在单行文本框内,选项列表在用户交互前保持隐藏。

适用场景:需要从预定义选项中选择单项;选项数量较少(少于10至15项);屏幕空间有限、无法一次展示全部选项;选中项无需始终可见。

不适用场景:需要多选时应改用复选框或多选控件;选项列表很长时应考虑自动补全或预输入;需要自由文本输入时应使用普通文本输入框;选项复杂或需要额外信息、视觉辅助时也不适用。

实现流程:先确认该模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉细节前先应用无障碍、性能和交互防护;使用测试指南验证键盘、屏幕阅读器、响应式及失败场景下的行为。

无障碍防护:使用可见标签并通过 for/id 与控件关联;简单场景优先使用原生 <select> 以继承内置无障碍能力;长列表提供分组标签(<optgroup>),必要时提供描述性辅助文本;保持焦点指示器高度可见,并维持足够的文字与背景对比度;使用 aria-invalid 和 aria-describedby 播报校验与错误状态。

相关模式:自动补全 https://uxpatterns.dev/patterns/forms/autocomplete;多选输入 https://uxpatterns.dev/patterns/forms/multi-select-input。完整实现细节、示例与测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/forms/selection-input。