TextLabel captions form controls or definitions with contextual information.
Anatomy
'%20fill='%23843CC7'/%3e%3crect%20x='109'%20y='106.5'%20width='24'%20height='24'%20rx='12'%20fill='%234B00E2'/%3e%3cpath%20d='M122.534%20113.818V124H120.993V115.359H120.933L118.497%20116.95V115.479L121.037%20113.818H122.534Z'%20fill='white'/%3e%3c/svg%3e)
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Text container | Inline element that renders label text in subtle color and a smaller font size. |
Guidelines
When to use
TextLabel is a focused typographic component built on top of Text and using the product-label text style. TextLabel is best used in the following contexts:
- Form control labels: Pair with a TextField, Select, Checkbox, or other input to provide a visible, accessible label.
- Key-value metadata: Use inside a description list to label read-only data like account settings or profile fields.
- Inline metadata: Mark short contextual details such as timestamps, categories, or counts alongside other content.
If none of these use cases apply, consider using Text directly with the appropriate text styles.
Appearance
Color
TextLabel uses the subtle text color by default to better complement its smaller font size in its role as supporting text. Color may be changed to any color inherited from the Text component to fit the required semantic need.
Subtle color serves as the default to emphasize the TextLabel's role.
Typography
TextLabel uses the product-label text style by default: a smaller font size (xxs), medium font weight, and subtle letter spacing. Typography options like font size, weight, family, and style can all be manually overridden with the props inherited from Text.
The product-label text style keeps labels compact and visually distinct from body text and headings.
Content
Length
Keep labels to one to three words maximum. If a label requires additional context, add a help icon with a Tooltip or a description below the label rather than adding to the label itself.
Question-style labels
When a label is associated with a form control that answers a yes-or-no question or asks the user to choose between options, phrase the label as a direct question to leave no room for misinterpretation. This pattern is common for Toggles, RadioGroups, and Selects.