标签

¥Label

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

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;
Expand code

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-label

结构

¥Anatomy

导入组件。

¥Import the component.

import { Label } from "radix-ui";

export default () => <Label.Root />;

API 参考

¥API Reference

根

¥Root

包含标签的内容。

¥Contains the content for the label.

可访问性

¥Accessibility

此组件基于原生 label 元素，在包裹控件或使用 htmlFor 属性时，它将自动应用正确的标签。为了使你自己的自定义控件正常工作，请确保它们基于原生元素，例如 button 或 input。

¥This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the htmlFor attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.