File
Description
Directive to add an icon to an eui-input-text element, allowing for click events too.
Basic Usage
Example :<input euiInputText [euiIcon]="{ icon: 'eui-search' }" />
Clickable Icon
Example :<input euiInputText
[euiIcon]="{ icon: 'eui-close', clickable: true, ariaLabel: 'Clear search' }"
(iconClick)="clearSearch()" />
Accessibility
- Non-clickable icons should be decorative (
aria-hidden="true")
- Clickable icons must have
ariaLabel for screen readers
- Clickable icons are keyboard accessible (Tab + Enter)
Notes
- Icon is positioned at the end of the input
- Automatically creates flex wrapper for layout
- Supports custom icon colors via
colour property
Implements
Index
Inputs
|
|
|
Outputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
|
readonly
|
Default value : null, { transform: booleanAttribute }
|
HostBindings
|
attr.readonly
|
Type : string | null
|
Accessors
|
cssClasses
|
getcssClasses()
|
setcssClasses(value: string)
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
|