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
@elemental/ui / Class

LmnFocusDisabledDirective

Decorators:@Directive
Selectors:[lmnFocusDisabled]

Directive to disable focus on the host element and all focusable elements inside it.

This directive is useful when you want to disable focus on a component and all its children. The original tabindex value is saved and restored when the directive is disabled.

Properties

NameTypeDescription
excludeHost
r
InputSignalWithTransform<boolean, unknown>

Whether to exclude the host element from the focus disabling. Default is false.

unfocusable
r
InputSignalWithTransform<boolean, unknown>

Whether to disable focus on the host element and all focusable elements inside it. Default is false.

Example usage

<div lmnFocusDisabled="true">
  <input type="text" />
  <button>Click me</button>
  <a href="#">Link</a>
  <a href="#" tabindex="0">Link with tabindex</a>
  <a href="#" tabindex="-1">Link with negative tabindex</a>
  <a href="#" tabindex="1">Link with positive tabindex</a>
  <a href="#" tabindex="2">Link with positive tabindex</a>
</div>