Skip to content

Add ⌘K / Ctrl+K keyboard shortcut indicator to search bar#7

Open
navajyoth-puthalath13 wants to merge 2 commits intoohcnetwork:mainfrom
navajyoth-puthalath13:search-form-kbd-indicator
Open

Add ⌘K / Ctrl+K keyboard shortcut indicator to search bar#7
navajyoth-puthalath13 wants to merge 2 commits intoohcnetwork:mainfrom
navajyoth-puthalath13:search-form-kbd-indicator

Conversation

@navajyoth-puthalath13
Copy link
Copy Markdown

What

Added a visual keyboard shortcut badge inside the search bar that displays ⌘ K on Mac and Ctrl K on Windows/Linux, indicating the shortcut to open the command palette.

Why

The search bar already supported the ⌘K / Ctrl+K shortcut via a keyboard listener, but there was no visual indication — users had no way to discover it. This follows common UI patterns seen in VS Code, GitHub, Linear, and other modern apps.

Changes

•	Updated search-form.tsx
•	Imported Command icon from lucide-react (aliased as CommandIcon to avoid naming conflicts)
•	Moved the search icon into a left-side InputGroupAddon
•	Added a right-side <kbd> badge to display the shortcut
•	Implemented OS detection (navigator.platform) to conditionally render:
•	⌘K on macOS
•	Ctrl+K on Windows/Linux
•	Positioned the shortcut badge appropriately within the input field for better visual clarity
image

@navajyoth-puthalath13
Copy link
Copy Markdown
Author

navajyoth-puthalath13 commented Apr 13, 2026

update on the KBD shortcut from Care UI.

image

CC : @vinutv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant