Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

F1 Help Key Kbd for Ark UI

A single F1 cap, the key many desktop apps use for help. It is a label, and it does not open help.

One cap reads F1. There is no group and no listener. Pointer events stay off.

Put F1 next to Help only when that key really opens it. On the web, a visible Button matters more than the key. In React, Ark UI does not open a help view.

Preview

Preview width
F1

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Kbd anatomy: kbd, group

Usage

<div className="rounded-md border bg-background p-4">
  <Kbd>F1</Kbd>
</div>

FAQ

When should an app document F1 for help?

When it actually opens your help, typically in desktop-style web apps with a lot of features. In a browser, F1 may open the browser's own help instead unless your page catches it.

Where should the F1 hint appear?

Next to the Help item in a menu, in a help button's tooltip and on the keyboard shortcuts page. It doesn't need to be on screen all the time.

What should F1 open?

Help for what the person is doing: the page or the focused field, not a generic start page. A side panel keeps their work visible while they read.

Does F1 work the same on Mac?

Not by default: on Mac keyboards, F1 lowers the screen brightness unless Fn is held or the function keys are set to standard mode. On Mac, ⌘? is the usual help shortcut.

Is F1 help accessible to everyone?

Many laptops need Fn to reach F1, and some people never use function keys. Keep a visible Help button or menu item; the key is a shortcut to it.

How do I catch F1?

Add a keydown listener to the document, check for event.key equal to F1, call preventDefault so the browser's help doesn't open, and open yours. Remove the listener when the component is removed.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 39 kbd examples