Label
Label is an element used to add text content to components. Label can be used for example inside elements Item, Card or also in element Badge and others.
The position of the label inside the element can be inline, fixed, stacked or floating.
When to use
Use wje-label when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
No properties available for this component.
Events
| Name | Description |
|---|---|
wje-label:change | Event fired when the label is changed. |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
label | The label part of the component. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-label-color | Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like black, red, or values like #000000, rgb(0, 0, 0)). |
--wje-label-font-size | Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., px, em, rem). The default value is 16px, which provides optimal readability in most designs. |
Slots
| Name | Description |
|---|---|
default | The default slot for the label. |