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 Select

Input Select

 Overview API Examples Style Tokens

LmnInputSelectComponent

import { LmnInputSelectComponent } from '@elemental/ui';
Decorators:@Component
Generic types:T
Selectors:lmn-input-select lmn-input-combobox lmn-input-autocomplete
Extends:LmnFormGroupDirective<T>
Implements:OnInitAfterContentInitAfterViewInitOnDestroyOnChanges

Use lmn-input-select selector to use this component as a select input.

Constructor

No documentation has been provided.

Presentation
constructor(

Properties

NameTypeDescription
#skipFocusOnPopoverClose
boolean
addValueAsOption
r
OutputEmitterRef<LmnInputSelectAddValueAsOptionEvent>

Event emitted when a value is added as option.

allowAddValueAsOption
r
InputSignalWithTransform<boolean, unknown>

If it is set to true and usageMode is "combobox" or "autocomplete", it shows an "Add [value]" option in the suggestions dropdown (where value is the current content of the text field).

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 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 input.

attrName
r
InputSignal<string | undefined>

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

attrSpellCheck
r
InputSignal<LmnInputSelectSpellCheck>

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

autocomplete
r
InputSignal<string>

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

clear
r
OutputEmitterRef<void>

Event emitted when the input is cleared.

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 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 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

inputChange
r
OutputEmitterRef<string>

Event emitted when the value in the input changes.

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 input.

name
r
inherited from LmnFormGroupDirective
InputSignal<string>

Define the name of the form group

nativeElement
r
HTMLElement
negative
r
inherited from LmnFormGroupDirective
InputSignalWithTransform<boolean, unknown>

Define the negative style for group

placeholder
r
InputSignal<string | undefined>

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

readonly
r
InputSignalWithTransform<boolean, unknown>

If it is set to true, a readonly="[value]" attribute is added to the 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 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 input.

requiredTrue
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is true

selectedOptionChange
r
OutputEmitterRef<T | null>

Event emitted when one option is selected.

selectionMode
r
InputSignal<LmnInputSelectSelectionMode>

It switches from single selection and multiple selection, and vice versa.

shape
r
InputSignal<LmnInputSelectShape>

sets the shape of the control

size
r
InputSignal<LmnInputSelectSize>

sets the size of the control

touched
r
inherited from ControlValueAccessorComponent
Signal<boolean | undefined>

Indicates if the control is touched

value
r
inherited from LmnFormGroupDirective
Signal<unknown>

Methods

focus()

No documentation has been provided.

Presentation
focus(): void;
Returns
void

setAllowWithoutControl()

inherited from LmnFormGroupDirective

No documentation has been provided.

Presentation
setAllowWithoutControl(value: boolean): void;
Parameters
NameTypeDescription
value
boolean
Returns
void
protected

toggleListPopover()

Handles the opening/closing of the popover for select and combobox usage modes

Presentation
protected toggleListPopover(event: MouseEvent): void;
Parameters
NameTypeDescription
event
MouseEvent

@param event

Returns
void

LmnInputOptionsComponent

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

Properties

NameTypeDescription
listElements
r
Signal<readonly ElementRef<any>[]>
listItems
r
Signal<readonly LmnListItemComponent[]>
nativeElement
r
HTMLElement

LmnInputOptionsSlateComponent

import { LmnInputOptionsSlateComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-input-options-slate

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 Search
Next
Input Slider