Label supports nested controls
The Label component supports nested controls within it.
Radix Primitives · all subjects
label
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Label anatomy: Label.Root component
The Label component is structured with a single root element imported from radix-ui. The Label.Root contains the content for the label.
Label htmlFor prop
The htmlFor prop accepts a string value representing the id of the element the label is associated with.
Label prevents text selection on double-click
Text selection is prevented when double clicking the label element.
Label accessibility: based on native label element
The Label component is based on the native HTML label element and automatically applies the correct labelling when wrapping controls or using the htmlFor attribute. For custom controls to work correctly with Label, they must use native elements such as button or input as a base.
Label primitive is designed to work with many Radix Primitives controls
The Label primitive is designed to work with many Radix Primitives controls to provide semantic meaning and context. It is up to the developer to provide labels so that users have the proper context when navigating the application.
Label component number input spinner click
Make sure that Label component doesn't interfere when clicking on the spinner of a number input.
Label breaking change useLabelContext removal
Removed useLabelContext and support for fully custom controls from Label. For native labelling to work, ensure your custom controls are based on native elements such as button or input.
Label native element improvement
Improved native behavior by using the native label element in Label.