Use a Label when you lay out a control yourself. Inside tp-field, the Field’s label attribute already renders and wires one, so a separate Label is not needed.
Association
Point for at the control’s id, or nest the control as the Label’s child. Either way the Label becomes the control’s accessible name, and clicking the text focuses or activates it.
By id and by nesting
Default density
Compact density
Restart from the initial state
Show the copyable source
optional adds an “Optional” hint after the text. Mark the few fields people may skip rather than every required one. The hint hides itself while the associated control is required, so a shared form template can set optional unconditionally.
Optional
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionforforstring''The id of the control this Label names, in the same document or shadow root.optionaloptionalbooleanfalseAdds an "Optional" hint after the text; it stays hidden while the control is required.
Slots
SlotDescriptiondefaultThe label text, and optionally the control itself when it is nested instead of referenced by for.
CSS parts
PartDescription::part(root)The native label that holds the text and the optional hint.::part(optional-indicator)The "Optional" hint after the text.
Related
Components, widgets and patterns that use this one.