IsUsingKeyboard

Live input modality

Observe the shared document-level state switch between keyboard and pointer input

Pointer modality

A pointer move or pointerdown was detected.

Try Tab or an arrow key, then move the pointer across the demo. The indicator follows the last input modality anywhere in the document.

<script lang="ts">
	import { IsUsingKeyboard } from 'bits-ui';

	const modality = new IsUsingKeyboard();
	const keyboard = $derived(modality.current);
</script>

<div class="grid gap-4">
	<section
		class="panel grid min-h-36 place-items-center p-6 text-center transition-colors"
		class:border-brand-500={keyboard}
		aria-live="polite"
	>
		<div>
			<div
				class="mx-auto mb-3 size-3 rounded-full"
				class:bg-brand-400={keyboard}
				class:bg-accent-500={!keyboard}
			></div>
			<p class="text-lg font-semibold text-ink-50">
				{keyboard ? 'Keyboard modality' : 'Pointer modality'}
			</p>
			<p class="muted mt-1 text-sm">
				{keyboard ? 'A document keydown was detected.' : 'A pointer move or pointerdown was detected.'}
			</p>
		</div>
	</section>

	<div class="grid gap-3 sm:grid-cols-2">
		<button class="btn justify-center">Tab here, then press a key</button>
		<button class="btn justify-center">Move the pointer here</button>
	</div>

	<p class="muted text-center text-xs">
		Try Tab or an arrow key, then move the pointer across the demo. The indicator follows the last input
		modality anywhere in the document.
	</p>
</div>

IsUsingKeyboard.current becomes true after a document keydown, then false after pointerdown or pointermove. It describes the latest input modality, not whether an element merely has focus.

Instances share one global reactive state and reference-counted document listeners, so components can observe modality without each registering duplicate handlers. Bits UI uses this signal for keyboard accessibility behavior; applications can also use it to avoid pointer-only focus decoration.