Label
Text and icon label primitives for components and form fields.
Search
Anatomy
1
2
Search
- 1 Start icon slot — optional decorative icon
- 2 Text — the label content
Options
Table of options
| Property | Values | Default |
|---|---|---|
| text | text | — |
| startIcon | icon name / none | none |
| endIcon | icon name / none | none |
| iconOnly | true / false | false |
| required (FieldLabel) | true / false | false |
| htmlFor (FieldLabel) | field id | — |
Behaviors
Search
Icon + text composition
Icons sit in start or end slots alongside the text. They are decorative by default.
Icon-only mode
Text is hidden, icon fills the label. Parent must provide an accessible name.
Usage guidelines
<label class="field-label">Do
Use FieldLabel with htmlFor to link label and input.
<span class="label-content">Don't
Don't use LabelContent for form fields — no semantic link to the input.
Content standards
- Sentence case. Keep labels concise.
- FieldLabel: describe the expected input, not the action.
Keyboard interactions
Labels are not interactive. FieldLabel clicking focuses the associated input.
Accessibility
- FieldLabel uses
<label>withforattribute. - LabelContent is a
<span>— no semantic role. - Icons are decorative (
aria-hidden="true"). - Icon-only requires
aria-labelon the parent.
Theming
Label adapts across brands and modes through typography and color tokens.
For the full theming architecture see Foundations: Theming.
Design checklist
All color themesWorks across light and dark modes.
Accessible contrastText meets 4.5:1.
Defined optionsText, icons, iconOnly, required documented.
Usage guidelinesFieldLabel vs. LabelContent do/don't.
Design tokensAll visual attributes as tokens.
Figma componentAvailable in Figma library.