Label

<Description>Renders an accessible label associated with controls.</Description>

<Highlights features={[ "Text selection is prevented when double clicking label.", "Supports nested controls.", ]} />

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 Reference

Root

Contains the content for the label.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "htmlFor",
		type: "string",
		description: "The id of the element the label is associated with.",
	},
]}

/>

Accessibility

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.