组件

标签

渲染与控件关联的可访问标签。

import * as React from "react";
import { Label } from "radix-ui";
import "./styles.css";
const LabelDemo = () => (
<div style={{ display: "flex", padding: "0 20px", flexWrap: "wrap", gap: 15, alignItems: "center", }} >
<Label.Root className="LabelRoot" htmlFor="firstName">
First name
</Label.Root>
<input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" />
</div>
);
export default LabelDemo;

特性

    双击标签时,文本选择被禁用。

    支持嵌套控件。

安装

从命令行安装组件。

npm install @radix-ui/react-label

结构

导入组件。

import { Label } from "radix-ui";
export default () => <Label.Root />;

API 参考

根元素

包含标签的内容。

属性类型默认值
asChild
布尔值
false
htmlFor
字符串
无默认值

无障碍访问

此组件基于原生 label 元素,当包裹控件或使用 htmlFor 属性时,它将自动应用正确的标签。为了使您自己的自定义控件正常工作,请确保它们使用原生元素(例如 buttoninput)作为基础。

上一个Hover Card
下一个Menubar