### 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
baseStatesDirective
###### Inputs
euiReadonly euiRequired euiSublabel
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

euiReadonly
Type : `boolean`
Default value : `false`

euiRequired
Type : `boolean`
Default value : `false`

euiSublabel
Type : `boolean`
Default value : `false`

### HostBindings

class
Type : `string`

### Properties

baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

### Accessors

cssClasses
get `cssClasses()`
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 ""