Components

标签

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

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;

Features

    双击标签时防止文本选择。

    支持嵌套控件。

安装

从命令行安装组件。

npm install @radix-ui/react-label

解剖结构

导入组件。

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

API 参考

根节点

包含标签的内容。

PropTypeDefault
asChild
boolean
false
htmlFor
string
No default value

可及性

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