选择字段

选择字段

select 字段存储从受控选项列表中选择的一个值。

最佳适用场景

  • 视觉变体
  • 对齐选项
  • 尺寸选项
  • 类别类的受控设置

模式示例

{
  "name": "theme",
  "label": "Theme",
  "type": "select",
  "options": ["light", "dark", "accent"]
}

标签/值 风格示例:

{
  "name": "alignment",
  "label": "Alignment",
  "type": "select",
  "options": [
    { "label": "Left", "value": "left" },
    { "label": "Center", "value": "center" },
    { "label": "Right", "value": "right" }
  ]
}

模板用法

<section class="theme-{{ theme }}">
  ...
</section>

何时使用

当作者应从已知选项中选择一个,并且允许的值应保持受控时,请使用 select

何时不应使用

不要将 select 用于:

  • 自由文本
  • 布尔切换(真/假)
  • 多条可重复的行

请改用 textcheckboxrepeater

技术说明

  • 发布后保持选项值稳定,因为模板可能依赖于它们
  • 使用对机器友好的值和对人友好的标签
  • 避免将 select 变成带有过多选项的隐藏内容仓库
  • 对二元切换优先使用 checkbox,对基于行的结构优先使用 repeater

相关