app-ui / forms / input-groups
Input With Keyboard Shortcut
21-input-with-keyboard-shortcut.jsx
export default function Example() {
return (
<div>
<label htmlFor="search" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
Quick search
</label>
<div className="mt-2">
<div className="flex rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:bg-white/5 dark:outline-1 dark:-outline-offset-1 dark:outline-white/10 dark:focus-within:outline-indigo-500">
<input
id="search"
name="search"
type="text"
className="block min-w-0 grow px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-transparent dark:text-white dark:placeholder:text-gray-500"
/>
<div className="flex py-1.5 pr-1.5">
<kbd className="inline-flex items-center rounded-sm border border-gray-200 px-1 font-sans text-xs text-gray-400 dark:border-white/10">
⌘K
</kbd>
</div>
</div>
</div>
</div>
)
}