Skip to content

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

Free

Mac Option Symbol Kbd for Svelte

The Mac Option symbol and Tab, grouped as an ⌥Tab label. The shortcut is drawn, not registered.

UI library: Ark UI

⌥ and Tab sit in one group. Option is the Mac name. The demo does not listen for the keys, and the caps ignore the pointer.

Show ⌥ to Mac readers and Alt to everyone else. If the chord would discard work, confirm in an Alert Dialog. In Svelte, Ark UI does not map the symbol to a key.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Kbd anatomy: kbd, group

Usage

<div class="rounded-md border bg-background p-4"><KbdGroup><Kbd>⌥</Kbd><Kbd>Tab</Kbd></KbdGroup></div>

FAQ

Should I show ⌥ or Alt for Mac users?

⌥, or the word Option: that's what Mac keyboards and menus say. Alt is the Windows and Linux name for the same key.

What is the ⌥ symbol and how do I type it?

It's the option key sign, U+2325. Paste it from macOS's Character Viewer or copy it from here; it's a plain character in the string.

Which Option shortcuts do Mac users need?

⌥ with the arrow keys moves by word in text, ⌥ Delete deletes a word, ⌥ click on a link downloads it in Safari, and ⌥ shows extra items in many menus.

How do I document Option for special characters?

Option types accents and symbols on Mac: ⌥E then E for é, ⌥G for ©. Avoid ⌥ letter shortcuts in your app for that reason, since they can stop people typing those characters.

Do screen readers read ⌥?

Not reliably. Add Option as visually hidden text inside the cap, with the symbol hidden, when it matters.

What is the Windows equivalent of Option?

Alt, the key in the same place. Alt shortcuts on Windows often use ⌥ on Mac, but check each one: some map to ⌘ instead.

API Reference

Kbd

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