eui documentation
  1. Components
  2. EuiLabelComponent

File

packages/components/eui-label/eui-label.component.ts

Description

eui-label is a versatile textual component used to display labels, sublabels, or inline text associated with other UI elements such as inputs, form fields, or interactive components. It supports multiple visual states, sizes, and variants through host directives and can be rendered as different HTML elements (<label>, <span>, <div>, <a>) while preserving consistent EUI styling and behavior. The component is purely structural and semantic. It does not manage layout or interaction by itself.

Basic Usage

Example :
<label euiLabel for="username">Username</label>
<input euiInputText id="username" />

Required Field

Example :
<label euiLabel [euiRequired]="true" for="email">Email Address</label>

With Variants

Example :
<span euiLabel euiDanger>Error message</span>
<span euiLabel euiSuccess>Success message</span>

Accessibility

  • Use <label> element with for attribute to associate with form controls
  • Required indicator is visual only; ensure form validation communicates requirement
  • Color alone should not convey meaning; use additional text or icons

Notes

  • Can be used as attribute selector on multiple HTML elements
  • Supports all BaseStatesDirective variants (primary, secondary, success, info, warning, danger)
  • Readonly state applies visual styling but does not affect functionality

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS euiSizeM euiSizeL euiSizeVariant euiDisabled 
selector label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel
template 
<ng-content/>
styleUrl ./eui-label.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

euiReadonly
Type : boolean
Default value : false
euiRequired
Type : boolean
Default value : false
euiSublabel
Type : boolean
Default value : false

HostBindings

class
Type : string

Computes and returns the CSS classes for the label component based on its current state. Combines base states, required status, readonly status, and sublabel type.

Properties

baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the label component based on its current state. Combines base states, required status, readonly status, and sublabel type.

Returns : string

results matching ""

    No results matching ""