Label

标签用于为表单控件提供可见名称。下方预览由 pingo 引擎实时渲染，并跟随站点主题切换明暗。

用法

import { Input, Label } from "@dopejs/pingo-ui";

root.render(
  <container style={{ flexDirection: "column" }}>
    <Label>邮箱</Label>
    <container height={8} />
    <Input semanticLabel="邮箱" width={320} />
  </container>,
);

pingo 没有 gap 属性，标签与控件之间的间距用一个固定尺寸的容器实现。

示例

语义名称

控件关联在 pingo 中尚不存在，因此标签与控件的关联靠约定：给控件传入与标签一致的 semanticLabel，让屏幕阅读器能读出同样的名称。

Props

无障碍

pingo 尚无 label–control 关联机制，Label 只是带样式的文本。请始终在对应控件上设置 semanticLabel，保证无障碍名称不依赖视觉邻近关系。