Skip to content

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

Free

Arrow Keys with Icons Kbd for Ark UI

Up, down, left, and right caps drawn with arrow icons, each with a visually hidden name for assistive tech.

Four caps in one group use arrow icons. Each icon is hidden from assistive tech and followed by a hidden name, such as Up arrow. The keys are not listened for.

Use icons when the font's arrow glyphs are unreliable. Repeat the name on a Button if the control is real. In React, Ark UI does not move focus from these caps.

Preview

Preview width

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">
  <KbdGroup>
    <Kbd>
      <ArrowUpIcon aria-hidden="true" />
      <span className="sr-only">Up arrow</span>
    </Kbd>
    <Kbd>
      <ArrowDownIcon aria-hidden="true" />
      <span className="sr-only">Down arrow</span>
    </Kbd>
    <Kbd>
      <ArrowLeftIcon aria-hidden="true" />
      <span className="sr-only">Left arrow</span>
    </Kbd>
    <Kbd>
      <ArrowRightIcon aria-hidden="true" />
      <span className="sr-only">Right arrow</span>
    </Kbd>
  </KbdGroup>
</div>

FAQ

Why icons instead of text labels?

An arrow says which way faster than the words Up or Left and needs no translation. Icons also keep a consistent stroke and size, where arrow characters vary from font to font.

How are the icon-only keys made accessible?

Each icon has aria-hidden so screen readers skip it, and a visually hidden span with the key's name, like Left arrow, gives them the text instead. Sighted users see only the icon.

Should the arrows be in a row or a keyboard layout?

A row, as here, fits inline hints like Use the arrows to move. For a controls panel, the inverted T of the Arrow Keys Cross Pattern example reads more like the keyboard.

Should I show HJKL next to the arrows?

If your app supports them, yes, in a separate group so people don't think they're pressed together. The Vim Navigation Keys example shows them.

How do I document arrow keys for a game?

Use the inverted T layout and label what each direction does, like Jump for up. Show WASD as an alternative if the game accepts it.

What are arrow keys used for in interfaces?

Moving between items in menus, lists, tabs, radio groups and toolbars, moving a slider, scrolling, and moving between slides or images. The components already handle them where the pattern calls for it.

API Reference

Kbd

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

All 39 kbd examples