Skip to main content

​
Overview

Label provides an accessible label that can be associated with form controls. It automatically handles the association when wrapping a control or using the htmlFor prop.

​
Features

  • Supports nested controls
  • Supports custom controls
  • Accessible text for screen readers
  • Works with all form inputs

​
Installation

npm install @radix-ui/react-label

​
Anatomy

import * as Label from '@radix-ui/react-label';

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

​
API Reference

​
Root

The label component.
​
htmlFor
string
The id of the element the label is associated with.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Label from '@radix-ui/react-label';
import './styles.css';

export default () => (
  <div style={{ display: 'flex', padding: '0 20px', flexWrap: 'wrap', gap: 15, alignItems: 'center' }}>
    <Label.Root className="Label" htmlFor="firstName">
      First name
    </Label.Root>
    <input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" />
  </div>
);

​
Accessibility

This component is based on the native label element and follows the same accessibility guidelines. It will automatically trigger the associated control when clicked.

​
Features

  • Clicking the label focuses or activates the associated control
  • Screen readers announce the label when the control is focused
  • Supports both explicit (htmlFor) and implicit (wrapping) associations

Build docs developers (and LLMs) love

Get started for freeTalk to us