渲染与控件关联的可访问标签。
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;
双击标签时防止文本选择。
支持嵌套控件。
从命令行安装组件。
导入组件。
包含标签的内容。
此组件基于原生 label
元素,当包装控件或使用 htmlFor
属性时,它将自动应用正确的标记。为了确保自定义控件正常工作,请确保它们使用原生元素,如 button
或 input
作为基础。