# EuiLabelComponent

**Type:** component



`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
```html
<label euiLabel for="username">Username</label>
<input euiInputText id="username" />
```

### Required Field
```html
<label euiLabel [euiRequired]="true" for="email">Email Address</label>
```

### With Variants
```html
<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


**Selector:** `label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,
               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel`

## Inputs
- **euiReadonly**: `boolean` - 
- **euiRequired**: `boolean` - 
- **euiSublabel**: `boolean` - 
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDisabled**: `any` - From host directive: #[[file:BaseStatesDirective.md]]