nativeLabel

nativeLabel creates a text caption associated with another component.

XML Element

nativeLabel

Java Class

NativeLabel

Basics

Use nativeLabel when a separate label component is needed instead of a component’s label attribute.

Set setFor to the ID of the component that the label describes. The following example associates a label with a checkbox:

<div>
    <checkbox id ="checkbox"/>
    <nativeLabel text="Enable Notifications" setFor="checkbox"/>
</div>
label basic

Having the label associated with a component makes the label text correctly interpreted by assistive technologies, such as screen readers.

To add text that is not associated with a component, use the span or div components.

Dynamic Label

Assign an ID to nativeLabel, inject it into the controller, and call setText() to update its text:

XML
<nativeLabel id="dynamicLabel" setFor="button"/>
<button id="button" text="Click"/>
Java
@ViewComponent
private NativeLabel dynamicLabel;

@Subscribe("button")
public void onButtonClick(final ClickEvent<JmixButton> event) {
    dynamicLabel.setText("Button clicked " + event.getClickCount() + " times.");
}
label dynamic

Theme Variants

Use the themeNames attribute to style the label as a badge. Combine badge with color, emphasis, shape, or size variants.

Variant Description Supported By

badge

Applies badge styling.

Aura, Lumo

success, warning, error, contrast

Applies a semantic color.

Aura, Lumo

primary

Adds stronger visual emphasis.

Aura, Lumo

pill

Rounds the badge corners.

Aura, Lumo

small

Makes the badge smaller.

Aura, Lumo

normal

Uses the regular badge size.

Aura, Lumo

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to nativeLabel:

Name Description Default

themeNames

Applies one or more variants listed in Theme Variants.

—

setFor

Associates the label with the component whose ID is specified, enabling assistive technologies to interpret the relationship.

—

Handlers

Name Description

AttachEvent

Fires when the label is attached to the UI.

DetachEvent

Fires when the label is detached from the UI.

See Also