Active Element

A reactive document.activeElement. Check which element is currently focused.

Stage	Category	Version	Last Updated	Demo
3	Inputs	3.0.0-next.2 (next)	Aug 13, 2026	Demo →

npm i @solid-primitives/active-element@next

Non-reactive primitives:

makeActiveElementListener - Listen for changes to the document.activeElement.
makeFocusListener - Attaches "blur" and "focus" event listeners to the element.

Reactive primitives:

createActiveElement - Provides reactive signal of document.activeElement.
createFocusSignal - Provides a signal representing element's focus state.

Directives:

focus - A directive that notifies you when the element becomes active or inactive.

`makeActiveElementListener`

Added id `@2.0.0`

Attaches event listeners to window, listening for the changes of the document.activeElement.

import { makeActiveElementListener } from "@solid-primitives/active-element";

const [activeElement, setActiveElement] = createSignal(null);
const clear = makeActiveElementListener(el => setActiveElement(el));

// remove listeners (happens also on cleanup)
clear();

Definition

function makeActiveElementListener(callback: (element: Element | null) => void): VoidFunction;

`makeFocusListener`

Added id `@2.0.0`

Attaches "blur" and "focus" event listeners to the element.

import { makeFocusListener } from "@solid-primitives/active-element";

const [isFocused, setIsFocused] = createSignal(false);
const clear = makeFocusListener(focused => setIsFocused(focused));

// remove listeners (happens also on cleanup)
clear();

Definition

function makeFocusListener(
  target: Element,
  callback: (isActive: boolean) => void,
  useCapture?: boolean,
): VoidFunction;

`createActiveElement`

Provides reactive signal of document.activeElement. Check which element is currently focused.

How to use it

import { createActiveElement } from "@solid-primitives/active-element";

const activeEl = createActiveElement();

createEffect(() => {
  console.log(activeEl()); // T: Element | null
});

Definition

function createActiveElement(): Accessor<Element | null>;

`createFocusSignal`

Provides a signal representing element's focus state.

How to use it

import { createFocusSignal } from "@solid-primitives/active-element";

const isFocused = createFocusSignal(el);
isFocused(); // T: boolean

// you can also use signals for ref
const [ref, setRef] = createSignal<Element>(el);
const isFocused = createFocusSignal(ref);
// this way if the element changes,
// the "isFocused" will start checking the new element

// is targeting a ref from jsx, pass it as a function
// or wrap primitive in onMount, so that it is accessed once mounted
let ref;
createFocusSignal(() => ref);
<div ref={ref} />;

Definition

function createFocusSignal(target: MaybeAccessor<Element>): Accessor<boolean>;

`focus`

A directive that notifies you when the element becomes active or inactive.

const [active, setActive] = createSignal(false)
<input use:focus={setActive} />

Definition

Directive<(isActive: boolean) => void>;

Changelog

See CHANGELOG.md