Loading dashboard...

标签 / Label

与表单控件配对以提升清晰度与可访问性。

基础配对

标签与输入框的关联。

姓名

邮箱

示例代码

<Label htmlFor="email">邮箱</Label>
<Input id="email" type="email" />

辅助说明

在标签下方补充说明。

工作区

这将成为你的 URL 一部分。

角色

用于个性化引导流程。

示例代码

<Label htmlFor="workspace">工作区</Label>
<Input id="workspace" />
<p className="text-xs text-muted-foreground">...</p>

行内布局

紧凑的标签对齐。

公司

职位

地点

示例代码

<div className="grid sm:grid-cols-[160px_1fr]">
  <Label htmlFor="company">公司</Label>
  <Input id="company" />
</div>

必填字段

标签搭配提示信息。

密码*

至少 8 个字符。

手机（可选）

示例代码

<Label htmlFor="password" className="flex items-center gap-2">
  密码 <span className="text-xs text-muted-foreground">*</span>
</Label>
<Input id="password" type="password" />

Loading dashboard...