Label

Renders an accessible label associated with controls.

Features

  • Text selection is prevented when double clicking label.
  • Supports nested controls.
  • Supports custom controls.

Install the component from your command line.

Import the component.

Create your styled label component.

First name

Contains the content for the label.

PropTypeDefaultRequired
asenumspanNot required
htmlForstringNo default valueNot required

Use the htmlfor attribute to connect the label with the input's id.

First name

Add an aria-labelledby attribute to your custom controls using the useLabelContext hook to add support for label nesting.

I agree to the terms and conditions

Using this component with our primitives, will automatically get you the correct labelling using id and aria-labelledby. You can also use the provided useLabelContext hook to support this in your own controls.