app-ui / forms / input-groups

Input With Keyboard Shortcut

← All blocks
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>
  )
}