shadcn.io is not affiliated with official shadcn/ui
Kbd examples · Function Keys
Editing Keys Kbd for React
The Home, End, PgUp and PgDn editing keys in a row.
Long documents and lists need more than arrow keys: jump to the start or end, move a page at a time. This React example shows Home, End, PgUp and PgDn as four Kbd caps in a row with a small gap, using the abbreviations printed on most keyboards. Use it in editor help, reading views and keyboard reference pages.
Preview
Installation
FAQ
Do Home and End work the same on Mac?
No. In macOS text fields, Home and End scroll the view without moving the cursor; ⌘← and ⌘→ go to the start and end of the line. Mac laptops have no Home or End keys at all: Fn with the arrow keys stands in for Home, End, Page Up and Page Down.
When should I document editing keys for text fields?
In apps with long text or code, like editors and note-taking tools, and in keyboard reference pages. Simple forms don't need them: browsers handle these keys in fields already.
Should I document PgUp and PgDn for paged content?
If your app maps them to its own pages, like slides or a paged table, yes. Otherwise they scroll the page, which people already expect.
What combinations work with the editing keys?
On Windows and Linux, Ctrl Home and Ctrl End jump to the start and end of the document, and Shift with any of them extends the selection. On macOS, use ⌘↑ and ⌘↓ for the document and Shift to select.
Related
- Special Keys KbdThe Esc, Tab and Enter keys in a row
- Modifier Keys KbdThe Shift, Ctrl and Alt modifier keys in
- Function Keys Row KbdThe full F1 to F12 function key row
- Simple TextareaA plain textarea with a placeholder and
- F1 Help Key KbdA single F1 key, the usual shortcut for
- F12 DevTools Key KbdA single F12 key, the shortcut that opens