Small helper for enabling nicer focus behaviour
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


npm version npm downloads

Small library that adds CSS class to html when user starts tabbing, and removes it if user clicks anywhere.

This enables you to have focus outline only when user is using keyboard.

Demo | Blog post


Get it from npm

npm install --save has-tabbed

and use it

import HasTabbed from 'has-tabbed';

const tabbed = new HasTabbed();

That's it. By default library is activated when instance is created. You can control it manually by using activate and deactivate methods.

// Removes all listeners and CSS class

// Adds listeners again

Then you can use --tabbed class in your CSS

/* This is naive example used in the demo */
* {
  outline: 1px dotted rgba(50, 50, 50, 0);
  outline-offset: 0.8rem;
  will-change: outline-color, outline-offset;

.--tabbed *:focus {
  outline: 1px dotted rgba(50, 50, 50, 1);
  outline-offset: 0.5rem;
  transition: outline-offset 250ms;



By default library will add --tabbed class to html element. To change it just pass custom class name when creating an instance.

import HasTabbed from 'has-tabbed';

const tabbed = new HasTabbed('my-super-duper-class');

Old school usage

You should use ES modules, but you can use it directly in the browser.

<!-- copy "has-tabbed.js" to your project -->
<script src="has-tabbed.js"></script>
  var tabbed = new HasTabbed();