Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Inputs Input Text

Input Text

 Overview API Examples Style Tokens

LmnInputTextComponent

import { LmnInputTextComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-text lmn-input-text-multiline lmn-input-text-password
Extends:ControlValueAccessorComponent
Implements:ControlValueAccessorOnInit

Properties

NameTypeDescription
allowClear
r
InputSignalWithTransform<boolean, unknown>

If it is set to true, and both disabled and readonly are set to false, a "clear" button is displayed in the field whenever the field is not empty.

attrId
r
InputSignalWithTransform<string, string | undefined>

If it is defined, an id="[value]" attribute is added to the text input, otherwise a default id will be assigned.

attrLang
r
InputSignal<string | undefined>

If it is defined, a lang="[value]" attribute is added to the text input.

attrName
r
InputSignal<string | undefined>

If it is defined, a name="[value]" attribute is added to the text input.

attrSpellCheck
r
InputSignal<LmnInputTextSpellCheck>

If defined and different from "auto", a spellcheck="[value]" attribute is added to the text input.

autoComplete
r
InputSignal<string | undefined>

If it is defined, an autocomplete="[value]" attribute is added to the text input.

clear
r
OutputEmitterRef<void>

Emits the value of the input text when the value changes.

controlDirective
r
inherited from ControlValueAccessorComponent
Signal<NgControl | ControlContainer | undefined>

Represent the Angular Control associated with the component.

dirty
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is dirty

disabledMarker
r
InputSignal<string>

If it is defined and disabled is set to true, it is displayed as the disabled marker after the label (if visible) of the text input.

disabledReason
r
InputSignal<string | undefined>

If it is defined and disabled is set to true, it is displayed as the content of the popover opened by the info button.

disabledReasonTriggerAriaLabel
r
InputSignal<string>

The aria label to be applied to the "i" button displayed when the input is disabled. If not defined, disabledReasonTriggerTooltip is used instead.

disabledReasonTriggerTooltip
r
InputSignal<string>

The label to be used in the tooltip applied on hover/focus to the "i" button displayed when the input text is disabled.

hasError
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control has errors

hasVisualError
r
inherited from ControlValueAccessorComponent
Signal<boolean>

Indicates if the control has a visual error by checking the data-lmn-has-error attribute or the lmn-has-error class

isDisabled
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is disabled

language
r
InputSignal<string | undefined>

If it is defined, it is used as extended label for languageCode.

languageCode
r
InputSignal<string | undefined>

If it is defined, it is displayed as the language marker after the label (if visible) of the text input.

nativeElement
r
HTMLElement

The native element of the component.

negative
r
InputSignalWithTransform<boolean, unknown>

It switches the component to its negative mode.

placeholder
r
InputSignal<string | undefined>

If it is defined, a placeholder="[value]" attribute is added to the text input.

readonly
r
InputSignalWithTransform<boolean, unknown>

If it is set to true, a readonly="[value]" attribute is added to the text input.

readonlyMarker
r
InputSignal<string>

If it is defined and readonly is set to true, it is displayed as the readonly marker after the label (if visible) of the text input.

required
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is required

requiredMarker
r
InputSignal<string>

If it is defined and required is set to true, it is displayed as the required marker after the label (if visible) of the text input.

requiredTrue
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is true

shape
r
InputSignal<LmnInputTextShape>

sets the shape of the control

size
r
InputSignal<LmnInputTextSize>

sets the size of the control

touched
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is touched

value
r
ModelSignal<string>

If it is defined, the value of the input text is set to the value of the input. When use the formControl, the value is managed by that.

Methods

focus()

Focus the input text

Presentation
focus(): void;
Returns
void

LmnInputTextContextualCustomDirective

import { LmnInputTextContextualCustomDirective } from '@elemental/ui';
Decorators:@Directive
Selectors:[lmnInputTextContextualCustom]

Properties

NameTypeDescription
nativeElement
r
HTMLElement

LmnInputLabelComponent

import { LmnInputLabelComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-label [lmnInputLabel]

Properties

NameTypeDescription
nativeElement
r
HTMLElement

LmnInputHintComponent

import { LmnInputHintComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-hint [lmnInputHint]

Properties

NameTypeDescription
nativeElement
r
HTMLElement

LmnInputErrorComponent

import { LmnInputErrorComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-error

Properties

NameTypeDescription
nativeElement
r
HTMLElement
templateRef
r
Signal<TemplateRef<unknown>>

LmnInputAlertComponent

import { LmnInputAlertComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-alert

Properties

NameTypeDescription
nativeElement
r
HTMLElement
templateRef
r
Signal<TemplateRef<unknown>>

Previous
Input Slider
Next
Input Toggle