组件

Label

用于字段标题、字段命名和表单辅助语义

Label

Label 用于给输入控件提供明确命名。

导入

import { Label } from "@downcity/ui";

最小示例

import { Input, Label } from "@downcity/ui";

export function NameField() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="agent-name">Agent 名称</Label>
      <Input id="agent-name" />
    </div>
  );
}

使用建议

  • 总是把 htmlFor 指向对应控件的 id
  • 勾选项时和 Checkbox 放在同一行
  • Label 负责语义，不负责复杂布局

继续阅读

Input

用于单行文本、搜索词和短配置项输入

Popover

用于轻量说明、小型配置面板和上下文补充操作

目录

Label导入最小示例使用建议继续阅读