TextLabel captions form controls or definitions with contextual information.
Structure
The TextLabel component uses a native HTML <label> element that assistive technology recognizes as a descriptor for a form control.
Description term
TextLabel, like other Pluma components, has the flexibility to be used as other HTML elements. When using TextLabel outside of form contexts, such as for key-value metadata or section group titles, use the as prop to change the component to a description term element (dt). Pair with a Text component rendered as a dd inside of a dl for a semantically-correct description or definition list.
Form control association
Semantic labels are most effective when directly associated with a form control. There are two methods to create this association:
- Explicit: Set the label's
for(htmlForin React) attribute to match the input'sid. This is the recommended approach because it allows for consistent association between label and control regardless of DOM structure. - Implicit: Nest the form control inside the label element. This approach works without an
idbut limits layout flexibility.
When a TextLabel is not associated with any form control, screen readers announce it as static text, and the user loses the ability to interact with the label to focus the input. Always ensure that labels used alongside form controls are properly linked.