packages/web-components/src/label/README.md
A label represents a caption for an item in a user interface.
Link to Label Design Spec in Figma
The fluent-label has several visual font size (small, medium, large) and font weight(regular, semibold) options. The fluent-label also provides appearances for required and disabled states.
Note about form association
In web components, when using the shadow DOM, it's not feasible to associate elements across the shadow DOM boundary using the traditional for attribute, since the shadow DOM creates a boundary that prevents the label element from accessing the input element's id attribute. Instead, the WC3 Label component uses the aria-labelledby attribute to associate the label element with the input element. This attribute has a value that matches the id of another element on the page, which serves as a label for the input element.
Creating a simple label element with an optional info icon and optional required state
Label| Name | Privacy | Type | Default | Description |
|---|---|---|---|---|
required | public | boolean | false | Specifies required styling for label |
disabled | public | boolean | false | Sets disabled state for label |
size | public | "small" "medium" "large" | "medium" | Specifies font size for label |
weight | public | "regular" "semibold" | "regular" | Specifies font weight for label |
| Name | Field |
|---|---|
required | required |
disabled | disabled |
size | size |
weight | weight |
| Name | Description |
|---|---|
| Default slotted content for label text |
<slot></slot> <span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>
Component and Slot Mapping
| Fluent UI React 9 | Fluent Web Components 3 |
|---|---|
<Label> | <fluent-label> |
Additional Deltas
| Fluent UI React 9 | Fluent Web Components 3 | |
|---|---|---|
| Renders | HTMLLabelElement | HTMLElement |
| API | HTMLLabelElement Spec | HTMLElement Spec |
| Shadow DOM | n/a | uses Shadow DOM |
| Accessibility | Uses for attribute to associate with form elements | Uses aria-labelledby to associate with form elements, does not have a for attribute |